jQuery取第一个值，并在所有值上显示相同

Question

我正在使用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>

Answer 1

您可以使用.html( function(index, oldhtml) )函数语法来完成此操作。

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

您当前代码的问题是，对于选择器$('.timestamp').html，您总是为所有选择器设置相同的值，而在获取$('.timestamp').attr('datetime');时，您只获得第一个值。

还有一件事是datetime属性无效，所以如果您不打算动态更改属性值并使用data检索，请考虑使用data-*`` attributes, i.e数据-datetime`并使用jquery data()访问属性值。

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

并且您可以将代码更改为

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

Answer 2

问题是，如果在选择器返回的元素集合上调用jQuery的getter方法(如attr()、html()、text()等不带参数的方法)，则只会返回该集合中第一个元素的信息，而不是您认为的数组。

而且，即使它确实返回了一个数组，jQuery也不会通过猜测您的意图来自动迭代该数组。因此，也就是说，您需要迭代选择器返回的元素，并逐个更新它们，谢天谢地，大多数方法都提供了使用匿名函数的迭代。因此，也就是说，您需要使用：

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

JS Fiddle demo。

上面的代码遍历每个元素，并将其设置为等于当前元素的datetime，而不是前面创建的变量(尽管实际上应该使用text()，因为不需要重新创建给定元素的HTML内容)。

所以，真的，我建议：

$('.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。

参考文献：

• attr().
• get().
• html().
• map().
• text().

Answer 3

attr提供了单一的价值。如果您需要对每个元素的属性值执行某些操作，则需要遍历这些元素。

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

});