jQuery取第一个值,并在所有节点上显示相同的值
我使用jQuery将时间戳转换为时间戳。它工作得很好,但当我的页面有太多的时间戳时,这段代码只使用第一个时间戳,并在所有时间戳上显示第一次jQuery取第一个值,并在所有节点上显示相同的值,jquery,Jquery,我使用jQuery将时间戳转换为时间戳。它工作得很好,但当我的页面有太多的时间戳时,这段代码只使用第一个时间戳,并在所有时间戳上显示第一次 jQuery(document).ready(function() { var time = $('.timestamp').attr('datetime'); var time2 = format_date(time); $('.timestamp').html(time2); }); <abbr class="times
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>
jQuery(文档).ready(函数(){
var time=$('.timestamp').attr('datetime');
var time2=格式和日期(时间);
$('.timestamp').html(time2);
});
0秒前
0秒前
0秒前
问题在于,如果对选择器返回的元素集合调用jQuery的getter方法(这些方法,例如attr()
,html()
,text()
,等等,不带参数),将只返回该集合的第一个元素的信息,而不是像您认为的那样,返回数组
而且,即使它确实返回了一个数组,jQuery也不会通过猜测您的意图自动迭代该数组。因此,也就是说,您需要迭代选择器返回的元素,并单独更新它们,谢天谢地,大多数方法本机提供了使用匿名函数进行迭代的功能。也就是说,您需要使用:
$('.timestamp').html(function(){
return $(this).attr('datetime');
});
上面对每个元素进行迭代,并将HTML设置为当前元素的datetime
,而不是之前创建的变量(尽管您确实应该使用text()
,因为您不需要重新创建给定元素的HTML内容)
所以,真的,我建议:
$('.timestamp').text(function(){
return $(this).attr('datetime');
});
但是,如果您更愿意使用外部变量,则可以使用以下方法(尽管我不太明白您为什么想要):
参考资料:
attr
提供单个值。如果需要使用每个元素的属性值执行某些操作,则需要在元素上循环
jQuery(document).ready(function() {
$('.timestamp').each(function (){
var time = $(this).attr('datetime');
var time2 = format_date(time);
$(this).html(time2);
});
});
您只需使用函数语法即可
$('.timestamp').html(function(){
return format_date($(this).attr('datetime'));
});
当前代码的问题是,使用选择器$('.timestamp').html
时,您总是为所有代码设置相同的值,同时获取$('.timestamp').attr('datetime')代码>您只获得第一个的值
另一件事是属性DATETIME无效,所以考虑使用<代码>数据-*属性,即<<代码>数据日期时间'',并使用您不打算立即更改属性值并使用数据检索的属性值来访问属性值。
<abbr class="timestamp" data-datetime="1370993104">0 seconds ago</abbr>
<abbr class="timestamp" data-datetime="1370993104">0 seconds ago</abbr>
$('.timestamp').html(function(){
return format_date($(this).data('datetime'));
});