jQuery .each（）僅適用於最後一個元素

我試圖創建一個通過YouTube獲取的視頻列表。這是我的HTML：jQuery .each（）僅適用於最後一個元素

<ul class="videos-list"> 
<li> 
    <a href="#" class="vid_thumb"> 
     <img src="http://placehold.it/120x90&amp;text=Loading+.+.+." class="yt_thumb" data-url="http://gdata.youtube.com/feeds/api/videos/f_JRZI9o49w?v=2&amp;alt=jsonc" alt="" /> 
    <span class="duration">Loading...</span></a> 
    <h5><a href="#"></a></h5> 
</li> 

<li> 
    <a href="#" class="vid_thumb"> 
     <img src="http://placehold.it/120x90&amp;text=Loading+.+.+." class="yt_thumb" data-url= 
    "http://gdata.youtube.com/feeds/api/videos/uHUHFthr2QA?v=2&amp;alt=jsonc" alt="" /> 
    <span class="duration">Loading...</span></a> 
    <h5><a href="#"></a></h5> 
</li>

這裏是JavaScript：

$(function() { 
    /** 
    * Set up JSON parsing for video pages 
    */ 
    $("a.vid_thumb").each(function(i) { 
     $this = $(this); 
     feed_url = $this.children(".yt_thumb").attr("data-url"); 
     $.getJSON(feed_url, function(json) { 
      $title = json.data.title; 
      $url = json.data.player. 
     default; 
      $thumb = json.data.thumbnail.sqDefault; 
      $duration = json.data.duration; 
      $likes = json.data.likeCount; 
      $views = json.data.viewCount; 
      $this.next("h5").html("<a href=" + $url + ">" + $title + "</a>"); 
      $this.children(".duration").html($duration); 
      $this.children(".yt_thumb").attr("src", $thumb); 
      $this.next("span.view_count").html($views + " Views"); 
      $this.next("span.upload_date").html($likes + " Likes"); 
     }); 
    }); 
});

的腳本應該與類名「vid_thumb」所有錨工作。但它只適用於最後一個元素。

你可以在這裏看到它的行動：http://jsfiddle.net/ZJNAa/我錯過了什麼嗎？

來源

2012-02-21 abhisek

我加入其中，持續時間檢查點後的警報，似乎你的代碼填充第一持續時間也在第二格。並在正確的時間後替換它。 – 2012-02-21 09:28:40

是的，這是一個經典的Javascript錯誤。

如果在聲明變量時省略了var關鍵字，則會將其創建爲全局變量。

你想要的是每個函數的本地變量，所以請確保以var爲前綴。

請參閱here爲更新和工作jsFiddle。

來源

2012-02-21 09:24:18 GregL

您需要用var關鍵字前綴的變量，否則他們是全球性的：

Modified fiddle

來源

2012-02-21 09:24:54

jQuery .each（）僅適用於最後一個元素

回答

相關問題