jquery - 迭代jQuery对象的最有效方法是什么

Question

我在jsperf上创建了一个简单的示例来帮助解释我的问题。在 jsperf 的示例中，在链接上设置了样式属性（我知道这可以在没有循环的情况下完成）。

迭代 jQuery 对象的最有效方法是什么？

根据 jsperf 的结果，.each性能相当不错，但也不是最快的。也许有一个更好的解决方案，我错过了。

1.以.each为例：

$('body').find('div.iojo-test-container a').each(function() {
  $(this).css('color', 'red');
});

2.for循环示例（略快于.each）：

var $a = $('body').find('div.iojo-test-container a');
for (var i = $a.length; --i;) {
  $($a[i]).css('color', 'red');
}

3.最快的方式设置风格，但请忽略这种情况。这是关于迭代而不是设置 css 样式。

$('body').find('div.iojo-test-container a').css('color', 'red');

score 3 · Accepted Answer

我的拙见

部署后进行优化是一回事，也许只是想进行微调，但除非您需要优化，否则不要担心。.each()工作正常，同时还具有可读性的额外好处。（很明显，您在被调用时正在迭代集合.each）。并不是说for循环不那么简洁，但除非您的加载时间或性能受到巨大影响，否则在游戏的这个阶段不要担心它。

如果速度真的是一个问题，那么 jQuery可以说是一个臃肿的库。像$(this).attr()直接访问这样的调用this.attr可以在不牺牲可读性的情况下增加好处（并且避免仅仅为了设置属性而加载 jQuery 包装器）。但是，您已选择使用该库，所以现在继续使用它。

score -1 · Accepted Answer

$('div.iojo-test-container a').css('color', 'red');

jquery 将自行迭代所有.iojo-test-container a并将它们设置为您的 css 属性

2 回答 2