jQuery each()与append()函数失效问题求助排查

嘿，我仔细瞅了你的代码，发现each()函数没正常工作主要是两个小问题导致的，咱们一个个捋清楚：

1. HTML标签语法错误 #

你在动态生成img标签的时候，src属性没有正确闭合引号，导致浏览器无法解析这个标签，看起来就像each循环没执行一样。

错误代码：

$(this).append('<img src="//img.youtube.com/vi/' + videoId + '/hqdefault.jpg />');

修正后：

$(this).append('<img src="//img.youtube.com/vi/' + videoId + '/hqdefault.jpg" />');

注意在hqdefault.jpg后面补上闭合的双引号"，让src属性的语法合法。

2. 函数调用时机不对 #

你定义了getThumbnail函数，但如果没有在DOM加载完成后调用它，$('.carousel-focus-item')就找不到对应的DOM元素，each()自然不会循环执行。

解决方法有两种：

• 把函数调用放在$(document).ready()里，确保DOM就绪后再执行：

  $(document).ready(function() {
      getThumbnail();
  });
  

• 直接把你的JS代码放在HTML的</body>标签之前，这样浏览器执行JS时，目标DOM元素已经加载完毕了。

测试验证 #

修正后可以在each循环里加一行console.log(videoId)，看看控制台能不能打印出每个元素的data-embed值，以此确认循环确实在正常运行。

内容的提问来源于stack exchange，提问作者Sandra Willford