循环遍历集合中的jQuery对象，而不为每次迭代初始化新的jQuery对象 [英] Looping through jQuery objects in a collection without initializing a new jQuery object for each iteration

问题描述

我发现自己一直这样做：

  $ myElements.each（function（ index，currentHtmltmlElement）{
 var $ currentJqueryElement = $（currentHtmltmlElement）; 
 //使用$ currentJqueryElement 
}）; 
  

在每次迭代中初始化一个新的jQuery对象是一个巨大的性能损失。

所以我想这样做（信用也转到decx @ freenode）：

  for（var index = 0; index< $ myElements.length; index ++）{
 var $ currentJqueryElement = $ myElements.eq（i）; 
 //使用$ currentJqueryElement 
} 
  

但我修正了< a href =http://jsperf.com/jquery-for-eq-vs-each =nofollow> JSPerf测试，这个片段的性能与第一个片段的性能相同！ :(

两者都很慢！对于非常大的收藏品，你甚至可以注意到页面冻结。

所以我想知道在集合中迭代jQuery对象的快速方法是什么。

这种方式也应该尽可能方便使用。这个：

  $ items.each $ item（function（$ item，index）{/ *直接使用$ item。 * /}）; 
  

方式比古代<$>更好c $ c> for（var i = 0 ... ineptitude。

UPD 2014-05-27

这是一个例子。想象一下你有很多jQuery UI Sliders：

 < div class =my-slider>< / div> 
< div class =my-slider>< / div> 
 < div class =my-slider>< / div> 
  

  $ sliders = $（我的滑块。）滑块（）。 
  

现在您想要登录控制每个滑块的值。你必须这样做：

  $ sliders.each（function（index，htmlSlider）{
 $ current_slider = $（htmlSlider）; //此步骤是一个巨大的性能损失
 
 console.log（
 $ current_slider.slider（'value'）
）; 
}）; 
  

所以任务是摆脱性能损失。

您不能简单地执行 $ sliders.slider（'value'），因为这将仅输出集合中第一个滑块的值。 / p>

你不能在循环中恢复为vanilla JS，因为你不能在没有jQuery对象的情况下访问jQuery小部件。

到目前为止，所有这些方法......

• $ sliders.each（function（index， htmlSlider）{htmlSlider}）;


• $ sliders.each（function（）{this}）;


• for（var i = 0; i< $ sliders.length; i ++）{$ sliders.eq（i）; }


• $。每个， $。makeArray ， $。map 等

...使用 $ sliders 的基本HTML元素数组，需要一个时间成本 $（）初始化来访问jQuery功能。 / p>

解决方案

如果你证明我错了，我会很高兴，但我得出结论一个jQuery集合是一个无法通过迭代的统一对象，只有它所代​​表的HTML元素存储为可以枚举的单独实体。你不能直接将jQuery集合拆分成部分，你只能用单独的HTML元素创建新的。

因此，每当回到循环内部的本机JS特性时可以提高绩效。

I find myself doing this all the time:

$myElements.each( function(index, currentHtmltmlElement) {
  var $currentJqueryElement = $(currentHtmltmlElement);
  // Working with $currentJqueryElement
});

Initializing a new jQuery object in each iteration is a huge performance penalty.

So i thought of doing this instead (credit also goes to decx@freenode):

for (var index = 0; index < $myElements.length; index++) {
  var $currentJqueryElement = $myElements.eq(i);
  // Working with $currentJqueryElement
}

But i fixed up a JSPerf test and this snippet's performance turned out to be identical to that of the first snippet! :(

Both are freaking slow! For really large collections, you could even notice the page freeze.

So i wonder what is the fast way of iterating through jQuery objects in a collection.

The way should also be as convenient to use as possible. This:

$items.each$item( function( $item, index ) { /* Working with $item directly. */ });

would be way better than the ancient for (var i=0... ineptitude.

UPD 2014-05-27

Here's an example. Imagine that you have a number of jQuery UI Sliders:

<div class="my-slider"></div>
<div class="my-slider"></div>
<div class="my-slider"></div>

$sliders = $('.my-slider').slider();

Now you would like to log to console the value of each slider. You have to do:

$sliders.each( function(index, htmlSlider) {
  $current_slider = $(htmlSlider); // This step is a huge performance penalty

  console.log(
    $current_slider.slider('value')
  );
});

So the task is to get rid of the performance penalty.

You can't simply do $sliders.slider('value') because this will output the value only of the first slider in the collection.

You can't revert to vanilla JS inside the loop because you can't access a jQuery widget without a jQuery object.

So far, all these approaches...

• $sliders.each( function(index, htmlSlider) { htmlSlider });
• $sliders.each( function() { this });
• for (var i = 0; i < $sliders.length; i++) { $sliders.eq(i); }
• $.each, $.makeArray, $.map, etc

...work with $sliders's underlying array of HTML elements and require a time-costy $( ) initialization to access jQuery features.

解决方案

I'll be happy if you prove me wrong, but i came to a conclusion that a jQuery collection is a uniform object that cannot be iterated trough and only the HTML elements it represents are stored as separate entities that can be enumerated. You can't split a jQuery collection into parts directly, you can only create new ones out of separate HTML elements.

Thus, revert to native JS features inside the loop whenever possible to improve performance.

这篇关于循环遍历集合中的jQuery对象，而不为每次迭代初始化新的jQuery对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！