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

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

$myElements.each（函数（索引，currentHtmltmlElement）{
变量$currentJqueryElement=$（currentHtmltmlElement）；
//使用$currentJqueryElement
});

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

因此，我想改为这样做（这也归功于decx@freenode):

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

但我修复了一个，这个代码段的性能与第一个代码段的性能完全相同！：(

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

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

该方法还应尽可能方便使用。这：

$items.每个$item（函数（$item，索引）{/*直接使用$item.*/}）；

对于（VarI=0…无能而言，这比古代的

要好得多

UPD 2014-05-27
下面是一个示例。假设您有许多jQuery UI滑块：



$sliders=$（'.my sliders'）.slider（）；

现在，您希望通过日志来控制台每个滑块的值。您必须执行以下操作：

$sliders.每个（函数（索引、htmlSlider）{
$current_slider=$（htmlSlider）；//这一步对性能造成了巨大的损失
console.log(
$current\u slider.slider（'值'）
);
});

因此，我们的任务是消除绩效惩罚

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

无法在循环中还原为vanilla JS，因为在没有jQuery对象的情况下无法访问jQuery小部件

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


$sliders.each（函数（索引，htmlSlider）{htmlSlider}）；
$sliders.each（function（）{this}）；
for（var i=0；i<$sliders.length；i++）{$sliders.eq（i）；}
$。每个
，
$.makeArray
，
$.map
等

…使用
$sliders
的底层HTML元素数组，需要花费时间
$（）
初始化才能访问jQuery功能。
只需使用
这个
关键字？似乎最快，更不用说（客观上）最容易理解了

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


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

回答更新问题

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

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

var elems=document.getElementsByClassName（'my-slider'）；
对于（变量i=0；i

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

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

for+eq（）：702

each（）：722

this:718

$.each（）：757（“最快”）


编辑

您不能直接将jQuery集合拆分为多个部分，您只能从单独的HTML元素中创建新的部分。-lolmaus-Andrey
米哈伊洛夫

试试看（在
控制台
，本页）

其他可能的办法

// `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`

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

因此，尽可能地恢复循环中的本机JS功能以提高性能。
是否听说过
$（this）
？
$项。每个（function（）{/$（this）是当前元素的jQuery表示形式}；
$foo.each（function（）{$（this）
和
$foo.each（function（i，e）{$（e）}
在技术上和性能上都是完全相同的。唯一的区别是使用参数总是有效的，而
由于范围代理或在CoffeeScript中使用
=>
，此
可能不可用。您可以从自己的测试中看出，在性能方面，您的变体与我的相同。“@PeteTNT如果性能有问题，为什么不跳过jQuery并使用纯JS？”--我认为有一个解决方案。如果性能损失是jQuery集合固有的，我可能必须在可能的情况下恢复到原生JS（值得努力）.1，跳过jQuery以获得性能。使用nativeJS，我的脚本速度提高了10倍（但不是跨浏览器lol）.Pete TNT，A1rPun，请建议一种在jQuery小部件上调用方法的nativeJS方式。请参阅更新的问题以获取示例。请参阅我的更新答案，它不适合每个用例，并且您无法轻松调用jQuery小部件上的方法，但如果标记中的值可见，则获取它们将是微不足道的。感谢您的建议。不幸的是，4%的性能增益可以忽略不计。甚至可能是一个测量错误。另一种可能的方法是简单地利用
$（$）或
$（$p[class^=foo]）
，仍然是一个“集合”。我们发现这也很有用
var arr=$。makeArray（$（$）
->
arr[7]
等。
第n种类型的
也可用于筛选集合。感谢分享。您对可能的测量错误非常了解；
$。each（）
不是“每次”运行最快的。尽管它似乎是“最快”的，大约4次运行中的3次。再次感谢
makeA
// `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`

$(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"))
            };
        })
    });
});

$(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"));
            })
        });
    });
})