循环遍历集合中的jQuery对象，而无需为每次迭代初始化新的jQuery对象

Question

我发现自己一直在这样做：

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

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

所以我想改做这个（功劳也归于decx@freenode）：

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

但是我修复了一个JSPerf测试，这个代码片段的性能与第一个代码片段完全相同！:(

两者都非常慢！对于非常大的集合，您甚至可以注意到页面冻结。

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

方式也应尽量方便使用。这：

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

会比古代的（var i=0...无能）好得多。

下面是一个示例。假设你有许多jQuery UI滑块：

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

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

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

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

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

因此，任务是摆脱性能损失。

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

您不能在循环中恢复到香草JS，因为如果没有jQuery对象，您就无法访问jQuery小部件。

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

• $sliders.each（函数（index， htmlSlider）{htmlSlider}）；
• $sliders.each（函数{this}）；
• for（var i=0； i

...使用< code>$sliders的HTML元素的底层数组，并且需要耗时的< code>$( )初始化来访问jQuery特性。

Answer 1

如果您证明我是错的，我会很高兴，但是我得出的结论是，jQuery集合是一个统一的对象，不能被迭代，只有它表示的HTML元素被存储为可以枚举的独立实体。您不能直接将一个jQuery集合分割成多个部分，您只能从单独的HTML元素中创建新的部分。

因此，尽可能恢复循环中的本地JS特性以提高性能。

Answer 2

只是用这个关键词？似乎是最快的，更不用说（客观上）最容易理解了。

$myElements.each( function() {
  var $currentJqueryElement = $(this);
});

http://jsperf.com/jquery-for-eq-vs-each/3

如果性能是个问题，为什么不跳过jQuery而使用纯JS呢？

回答更新

如果您想获得滑块值（看起来只是css style“left”的数量），可以执行以下操作：

var elems = document.getElementsByClassName('my-slider');
for (var i = 0; i < elems.length; i++){
    console.log(elems[i].style.left); // logs : xx.xx%
}

会更快吗？也许吧。这种方法适合所有用例吗？很可能不会，但对于那个特定的问题，它应该有效。

Answer 3

尝试

$.each($p, function(i, v) {
  test = $(v)
})

< code>for eq() : 702

each（）： 722

此：718

<代码>$。each（）：757（“最快”）

http://jsperf.com/jquery-for-eq-vs-each/5

编辑

您不能直接将jQuery集合拆分为多个部分，只能使用单独的超文本标记语言元素创建新集合。-lolmaus-Andrey Mikhaylov

尝试（在控制台，此页面）

$("div"); // jQuery `collection` ? approx. `222` members, changes

// `split` 1st `101` members of jquery `obj`, or `collection` 
var split_jq_obj_1 = $("div").slice(0, 111); 

// `split` 2nd `101` members of jquery `obj`, or `collection` 
var split_jq_obj_2 = $("div").slice(-111); 

// Note `prevObject` and `selector` properties of  `jQuery` `object`
// `split_jq_obj_1` and `split_jq_obj_2` 
// `prevObject: e.fn.e.init[222]` , `selector: "div.slice(0,111)"`, 
// `prevObject: e.fn.e.init[222]`, `selector: "div.slice(-111)"`) 


// check results 
console.log($("div"), split_jq_obj_1, split_jq_obj_2);         
console.log($("div").length, split_jq_obj_1.length, split_jq_obj_2.length);

其他可能的方法

// `jquery` `object`, or `objects` 
var arr = $.makeArray($.map($("div"), function(value, index) {
  return ( index < 111 ? [$(value)] : null )
}), $.map($("div"), function(value, index) {
  return ( index >= 111 ? [$(value)] : null )
}));

console.log(arr); // `collection` of `jQuery` `objects`

// iterate `jquery` object`, or `objects`, 
// find `length` of `class` `item-content`
$.each($(arr), function(index, value) {
  console.log($(value).find(".item-content").length) // `29` (see `iteration` at `console`)
});

// check results
$(".item-content").length; // `29`

编辑 2014-05-28

试试这个（图案）

$(function () {
    var sliders = $('.sliiider').slider({
        min: 0,
        max: 100
    });

    $('html').click(function () {
        $.when(sliders)
            .then(function (data) {
            for (var i = 0; i < data.length; i++) {
                // `$()` jQuery `wrapper` _not_ utilized,
                // not certain about quantifying `cost`, if any,
                // of utilizing jquery's `deferred` `object`s
                // test by sliding several `sliders`,
                // then `click` `document`, or `html`
                console.log(data.eq(i).slider("value"))
            };
        })
    });
});

js小提琴http://jsfiddle.net/guest271314/8gVee/

fwiw，这种模式似乎也有效，同样没有使用jQuery的init包装器$（）

$(function () {
    var sliders = $('.sliiider').slider({
        min: 0,
        max: 100
    });

    $('html').click(function () {
        $.when(sliders)
            .then(function (data) {
            // Note, 2nd parameter to `.each()` not utilized, here
            data.each(function (i) {  
                // `$()` jQuery `init` `wrapper` _not_ utilized, 
                // within `.each()` `loop`,
                // same result as utilizing `for` loop,
                // "performance", or "fastest" not tested as yet
                console.log(data.eq(i).slider("value"));
            })
        });
    });
})

js小提琴http://jsfiddle.net/guest271314/G944X/