javascript - 循环遍历集合中的 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 test结果这个片段的表现与第一个片段的表现相同! :(

两者都非常慢!对于非常大的集合，您甚至会注意到页面卡住。

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

方式也应该尽可能方便使用。这:

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

会比古老的方式更好for (var i=0...无能。

UPD 2014-05-27

这是一个例子。假设您有许多 jQuery UI slider :

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

$sliders = $('.my-slider').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')因为这将仅输出集合中第一个 slider 的值。

您无法在循环内恢复到原始 JS，因为您无法在没有 jQuery 对象的情况下访问 jQuery 小部件。

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

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

...与 $sliders 一起工作的底层 HTML 元素数组，需要耗费时间 $( )初始化以访问 jQuery 功能。

Answer 1

尝试

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

for + eq() : 702

每个():722

这个:718

$.each() : 757(“最快”)

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

编辑

You can't split a jQuery collection into parts directly, you can only create new ones out of separate HTML elements. -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"))
            };
        })
    });
});

jsfiddle http://jsfiddle.net/guest271314/8gVee/

首先，这个模式似乎也可以工作，同样没有利用 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"));
            })
        });
    });
})

jsfiddle http://jsfiddle.net/guest271314/G944X/