0

（embedメソッドを使用して）ページ内のすべてのYouTubeビデオをループし、iframejQueryを使用してビデオの各タイトルに追加しようとしています。私のHTMLは次のようになります。

<div class="video-wrapper">
  <div class="video-container">
    <iframe src="http://www.youtube.com/embed/qzNSsDD_LzE" frameborder="0" allowfullscreen></iframe>
  </div>
</div>
<div class="video-wrapper">
  <div class="video-container">
    <iframe src="http://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

そして、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('<figcaption>'+videoTitle+'</figcaption>');
  });         
});

だから、私は（しようとしている）各ビデオを撮り、正規表現を使用してIDを抽出しています。次に、ビデオフィードを使用してタイトルを取得し、それをに追加しますvideo-container。

これはjsFiddleにあります。ご覧のとおり、問題は各ビデオのタイトルが毎回追加されることです。私はどこで間違っているのですか、そしてこれは私が求めていることを達成するための効率的な方法ですか？

4

1 に答える 1

1

ビデオ変数は、セレクター「.video-container」に一致するオブジェクトのセット全体を参照するため、

video.after('<figcaption>'+videoTitle+'</figcaption>');

それはそれぞれにそれをしています。

あなたがする必要があるのは次のようなものです：

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('<figcaption>'+videoTitle+'</figcaption>');
  });         
});

videoBox変数は、そのビデオの特定のdivを指します。

于 2013-01-15T16:59:52.713 に答える