jquery - 条件“属性”小于的jquery选择器

Question

早上好，

只是为了我对知识的渴望，我对是否有可能优化以下简单功能的问题感兴趣。

$('.item').each(function(){
    var el = $(this);
    if (el.data('timestamp') < 1374033452)
        el.addClass('processed');
});

可能会发生，“.item”的选择器返回超过一百个，在最坏的情况下甚至返回数千个元素，这实际上表现得不是很好。时间戳是添加到每个 .item 的数据属性的 unix 时间戳值。

亲切的问候，

多米尼克

Answer 1

你可以尝试类似的东西

$('.item').filter(function(){
    return $(this).data('timestamp') < 1374033452
}).addClass('processed');

示例：分析

Answer 2

$('.item').addClass(function(){
    return this.getAttribute('data-timestamp') < 1374033452 ? 'processed' : '';
});

Answer 3

jQuery 增加了很多开销。只需使用 vanilla JS，您就可以快十倍以上：

var elements = document.getElementsByClassName('item');
for (var i=elements.length; i-->0;) {
  if (elements[i].getAttribute('data-timestamp') < 1374033452) {
     elements[i].className = 'processed';
  }
}

（请注意，我认为您可以替换所有类，而不仅仅是添加）

JSPerf

但是您遇到的性能问题可能更多地与回流的成本有关，而不是与简单的 JavaScript 执行有关。例如，如果processed类改变了元素的尺寸，它可能会强制进行大的回流。与纯 jQuery/JavaScript 相比，这里可能有更多的收获。

Answer 4

我不认为你可以第一次解决它，但随后的调用，你可能可以这样：

$(".item:not('.processed')").each(function(){
    var el = $(this);
    if (el.data('timestamp') < 1374033452)
        el.addClass('processed');
});

但我不知道这是否适合您的用例。

http://api.jquery.com/not-selector/