Question

几个问题：

是一个常规的javascript循环（循环一系列元素）比使用jQuery更快/更有效each() ??
如果是这样，将以下代码编写为常规javascript循环的最佳方法是什么？

$('div').each(function(){ //... })

Answer 1

是的，删除each()会让您获得更好的效果。这就是为元素列表编写for循环的方法。

var divs = $('div');

for(var i = 0; i < divs.length; i++){
    var thisDiv = divs[i]; // element

    var $thisDiv = $(divs[i]); // jquery object

    // do stuff
}

Answer 2

var divs = document.getElementsByTagName('div'),
    l = divs.length, i, cur;

for(i=0; i<l; i++) {
    cur = divs[i];
    // do stuff with cur here
}

请继续按照效率的名义删除jQuery。此代码比jQuery等效代码快约五十倍。

Answer 3

要回答你的第二个问题，由于第一个问题已经得到解答;

我也对此感兴趣，并且我决定使用Gabe的例子对两者进行基准测试以找出差异。答案是，在需要jQuery对象作为最终结果的情况下：

他们表现完全相同。

http://jsperf.com/jquery-each-vs-native-selectors

Firefox显然更快地找到了jQuery版本。

Answer 4

而不是使用jquery .each()

$('div').each(function(){ //... })

您可以使用document.querySelectorAll()，然后将HTMLCollection转换为JavaScript数组。然后你可以映射元素数组。

 const elems = document.querySelectorAll('.my-elements')
 const $elems = [].slice.call(elems)
 $elems.map( (elem) => { console.log(elem) })

如何将jQuery each（）转换为常规的javascript循环

4 个答案: