Javascript $().each 与 $.each 与 jQuery 中的 for 循环？

$().each vs $.each vs for loop in jQuery?

提问by Royi Namir

I Can't understand why it is happening.

我不明白为什么会这样。

I read herethat :

我在这里读到：

The first $.eachconstitutes a singlefunction call to start the iterator.

The second $(foo.vals).eachmakes threefunction calls to start the iterator.

• The first is to the $() which produces a new jQuery wrapper set (Not sure how many other function calls are made during this process).
• Then the call to $().each.
• And finally it makes the internal call to jQuery.each to start the iterator.

In your example, the difference would be negligible to say the least. However, in a nested use scenario, you might find performance becoming an issue.

Finally, Cody Lindley in jQuery Enlightenment does not recommend using $.each for iterations greater than 1000 because of the function calls involved. Use a normal for( var i = 0... loop.

第一个$.each构成启动迭代器的单个函数调用。

第二个。每个$（foo.vals）使得3个函数调用来启动迭代器。

• 第一个是 $() ，它生成一个新的 jQuery 包装器集（不确定在此过程中进行了多少其他函数调用）。
• 然后调用 $().each。
• 最后它对 jQuery.each 进行内部调用以启动迭代器。

在您的示例中，差异至少可以忽略不计。但是，在嵌套使用场景中，您可能会发现性能成为一个问题。

最后，jQuery Enlightenment 中的 Cody Lindley 不建议将 $.each 用于大于 1000 的迭代，因为涉及到函数调用。使用正常的 for( var i = 0... 循环。

So I tested it with this jsperf :

所以我用这个 jsperf 测试了它：

(task : find Tr's who has checked checkbox inside of them , and color that tr.)

（任务：找到选中了其中复选框的 Tr，并为该 tr 着色。）

This is the jsbin

这是jsbin

But look at jsperf

但是看看jsperf

against all expectations , the oppositeis the true. ( chrome and FF and IE)

出乎所有人的意料，事实恰恰相反。（铬和FF和IE）

The one who uses $().each( which calls three methods is the fastest and etc..

使用$().each( 调用三种方法的速度最快，等等。

What is going on here?

这里发生了什么？

采纳答案by the system

Your test is too heavy to really determine the actual difference between the three looping options.

您的测试太繁重，无法真正确定三个循环选项之间的实际差异。

If you want to test looping, then you need to do your best to remove as much non-related work from the test as possible.

如果您想测试循环，那么您需要尽最大努力从测试中删除尽可能多的非相关工作。

As it stands, your test includes:

就目前而言，您的测试包括：

• DOM selection
• DOM traversal
• element mutation

• DOM 选择
• DOM遍历
• 元素突变

All of those are quite expensive operations compared to the loops themselves. When removing the extra stuff, the difference between the loops is much more visible.

与循环本身相比，所有这些都是非常昂贵的操作。去除多余的东西时，循环之间的差异更加明显。

http://jsperf.com/asdasda223/4

http://jsperf.com/asdasda223/4

In both Firefox and Chrome, the forloop is well over 100x faster than the others.

在 Firefox 和 Chrome 中，for循环比其他的快 100 多倍。

回答by Forbesmyester

Well

好

• $.each()is a jQuery function being executed which will be used to iterate over your list, so the overhead should be the jQuery function as well as the overhead of calling for that function for every item in the list. In this case
• $(thing).each()The idea behind this is that the $(thing)makes an jQuery instance and then you iterate over this instance (.eachacts on that instance). In your case, because the instance you called it with is already a jQuery object, the overhead is minimal (are you an instance, oh yes you are).
• for()In this case there is no overhead at all, except looking up the length of the list on each iteration.

• $.each()是一个正在执行的 jQuery 函数，它将用于遍历您的列表，因此开销应该是 jQuery 函数以及为列表中的每个项目调用该函数的开销。在这种情况下
• $(thing).each()这背后的想法是$(thing)创建一个 jQuery 实例，然后迭代这个实例（.each作用于那个实例）。在你的情况下，因为你调用它的实例已经是一个 jQuery 对象，所以开销很小（你是一个实例，哦，是的，你是）。
• for()在这种情况下，除了在每次迭代中查找列表的长度外，根本没有开销。

Consider doing:

考虑做：

var l = g.length;
for (var i=0;i<l;i++) {
    // code;
}

Depending on your HTML most of the time could very well be in the Sizzle Jquery parser finding your selector in the document.

根据您的 HTML，大部分时间很可能在 Sizzle Jquery 解析器中找到您在文档中的选择器。

Also note, I don't think your selector is the best, unless things have changed significantly recently jQuery selectors are evaluated right to left, consider limiting the scope of the selector by doing a .find()on everything beneath the first tag referenced by id as it will then be searching only a subset of the document.

另请注意，我不认为您的选择器是最好的，除非最近情况发生了显着变化 jQuery 选择器从右到左进行评估，考虑通过.find()对 id 引用的第一个标签下方的所有内容执行 a来限制选择器的范围，因为它会然后只搜索文档的一个子集。

回答by Simon Dragsb?k

Different approach to your "task" http://jsfiddle.net/ADMnj/17/

您的“任务”的不同方法http://jsfiddle.net/ADMnj/17/

But i guess the performance issues are coming from that you dont state selector the in the right matter

但我想性能问题是因为你没有在正确的事情上声明选择器

#t tr input:checkbox:checked 

VS

#t tr :checkbox:checked 

Tough the right way to check if a checkbox is checked would be to call it like this

检查复选框是否被选中的正确方法是这样调用它

#t tr input[checked="checked"]

W3.ORG's selector list see the E[foo]

W3.ORG 的选择器列表见 E[foo]

And last but not least the fastest is also the one with the shortest code which might be the slight performance different you get from 3 lines vs 4 and 5 lines of code but cant prove this fact

最后但并非最不重要的是，最快的代码也是最短的代码，这可能是您从 3 行与 4 行和 5 行代码中获得的轻微性能差异，但无法证明这一事实