添加YouTube嵌入式video标题

我正在尝试遍历页面中的每个YouTubevideo（使用iframe嵌入方法）并使用jQuery附加到video的每个标题。 我的HTML看起来像这样：

jQuery看起来像这样：

 var video = $('.video-container'); video.each(function() { var youTuberegex = /(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com(?:\/embed\/|\/v\/|\/watch\?v=))([\w-]{10,12})/g, videoID = youTuberegex.exec($(this).find('iframe').attr('src'))[1]; $.getJSON('http://gdata.youtube.com/feeds/api/videos/'+videoID+'?v=2&alt=jsonc', function(data){ var videoTitle = data.data.title; video.after('
'+videoTitle+'
'); }); }); 

所以，我（尝试）拍摄每个video并使用正则表达式来提取ID。 然后，我使用video源检索标题，并将其附加到video-container 。

这是一个jsFiddle 。 如您所见，问题是每次都附加每个video的标题。 我哪里出错了，这是实现我追求目标的有效方式吗？

Answer 1

video变量是指与选择器“.video-container”匹配的整个对象集，因此当您这样做时

 video.after('
'+videoTitle+'
'); 

每个人都这样做。

你需要做的是：

 video.each(function() { var videoBox = $(this) var youTuberegex = /(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com(?:\/embed\/|\/v\/|\/watch\?v=))([\w-]{10,12})/g, videoID = youTuberegex.exec($(this).find('iframe').attr('src'))[1]; $.getJSON('http://gdata.youtube.com/feeds/api/videos/'+videoID+'?v=2&alt=jsonc', function(data){ var videoTitle = data.data.title; videoBox.after('
'+videoTitle+'
'); }); }); 

videoBox变量指向该video的特定div。