jQuery取得第一個值，並顯示相同的所有

我使用jQuery將時間戳轉換爲時間。它可以很好地工作，但是當我的頁面有太多時間戳時，這段代碼只會佔用第一個時間戳，並在所有時間戳中顯示第一次。jQuery取得第一個值，並顯示相同的所有

jQuery(document).ready(function() { 
    var time = $('.timestamp').attr('datetime'); 
    var time2 = format_date(time); 
    $('.timestamp').html(time2); 
}); 

<abbr class="timestamp" datetime="1370993104">0 seconds ago</abbr> 

<abbr class="timestamp" datetime="1370854140">0 seconds ago</abbr> 

<abbr class="timestamp" datetime="1370627340">0 seconds ago</abbr>

來源

2013-06-11 nobler

您可以使用.html(function(index, oldhtml))函數語法來做到這一點。與您現有的代碼

$('.timestamp').html(function(){ 
    return format_date($(this).attr('datetime')); 
    });

的問題是，你的選擇$('.timestamp').html你總是設置爲所有這些相同的值，同時獲得$('.timestamp').attr('datetime');你只得到了第一個的值。

還有一件事是屬性datetime無效，所以考慮使用data-*`` attributes, i.e data-datetime`並使用jquery data()訪問屬性值，前提是您不打算實時更改屬性值並使用數據進行檢索。

<abbr class="timestamp" data-datetime="1370993104">0 seconds ago</abbr>

，你可以改變你的代碼

$('.timestamp').html(function(){ 
     return format_date($(this).data('datetime')); 
    });

來源

2013-06-11 23:32:12 PSL

的問題是，jQuery的，如果叫上通過選擇返回元素的集合getter方法（這些方法，如attr()，html()，text()等，不帶參數），將只返回從信息第一個該集的元素，而不是像你想象的那樣是一個數組。

而且，即使它確實返回一個數組，jQuery也不會通過猜測您的意圖自動迭代該數組。所以說，你需要遍歷選擇器返回的元素，並單獨更新它們，幸好大多數方法本身提供了使用匿名函數的迭代。所以說，你需要使用：

$('.timestamp').html(function(){ 
    return $(this).attr('datetime'); 
});

JS Fiddle demo。

在每個元素的上述迭代，並設置HTML（但實際上你應該使用text()，因爲你不需要重新給定元素的HTML內容）是等於當前的datetime元素，而不是您之前創建的變量。

所以，真的，我建議：

$('.timestamp').text(function(){ 
    return $(this).attr('datetime'); 
});

JS Fiddle demo。

如果你想用一個外部變量，不過，你可以用下面的辦法（雖然我真的不明白你爲什麼會想）：

var times = $('.timestamp').map(function(){ 
    return $(this).attr('datetime'); 
}).get(); 

$('.timestamp').text(function(i){ 
    return times[i]; 
});

JS Fiddle demo。

參考文獻：

來源

2013-06-11 23:30:41

attr提供單個值。如果需要對每個元素的屬性值進行操作，則需要遍歷元素。

jQuery(document).ready(function() { 
    $('.timestamp').each(function(){ 
     var time = $(this).attr('datetime'); 
     var time2 = format_date(time); 
     $(this).html(time2); 
    }); 

});

來源

2013-06-11 23:31:04 prodigitalson

jQuery取得第一個值，並顯示相同的所有

回答

相關問題