Question

我知道这样做的标准方法：

$('div').each(function(){
      // here `this` is bound to DOM Element
      // use $(this) to access the jQuery wrapper
})'

但这有点麻烦，因为我们需要在任何地方使用$(this)，这会导致http://jsperf.com/jquery-each-this所示的性能损失。

我正在寻找一种迭代jQuery数组/选择器的方法，其中this绑定到jQuery包装器而不是DOM元素。

Answer 1

您可以使用普通循环。并使用.slice(index, 1)获取相应的jQuery对象。

.eq()做同样的事情，并映射到.slice()，因此.slice(i, 1)比.eq(index)更有效。

var $divs = $('div');
for (var i=0; i <$divs.length; i++) {
    $divs.slice(i);
}

请注意，闭包不存在。如果要使用闭包，请创建一个临时函数：

function eachMethod(index, $elem) { /* ... */ }
var $divs = $('div');
for (var i=0; i <$divs.length; i++) {
    eachMethod(i, $divs.slice(i, 1));
    // Or, if you even want to preserve `this`
    // eachMethod.call($divs[i], i, $divs.slice(i, 1));
}

更新：jQuery plugin以实现所需的“每种语法”：

(function($) {
    $.fn._each = function(method) {
        // this points to the jQuery collection
        for (var i=0; i <this.length; i++) {
            method.call(this[i], i, this.slice(i, 1));
        }
        return this;
    };
})(jQuery);
// Usage:
$('div')._each(function(index, $elem) {
    // this points to the DOM element
    // index to the index
    // $elem to the jQuery-wrapped DOM element
});

Answer 2

使用jQuery提供的.toArray()怎么样？

var divs = $('div').toArray();

for (var i = 0; i < divs.length; i++) {
    // do something with divs[i]
  }

那会更快吗？

Answer 3

你可以这样做......

$k = $(this)  // the $ in $k is not really necessary but helps readability

然后在没有任何处理的情况下随时随地使用

$k.hide()

Answer 4

var elements = $('div');
for( var i = 0; i < elements.length; i++ ) {
    elements.eq(i);
}

Answer 5

var $this, $elements = $(selector), len = $elements.length;
for(var i=0; i < len; i++) {
   $this = $elements.eq(i);
}

既然你已经提到了性能，而且我只相信你有瓶颈，而且你没有在没有实际问题的情况下迷恋代码，你还可以做其他一些事情。

尽可能在本地范围内变量。（注意len = $ elements.length以上）。

如果迭代的顺序无关紧要，你可以加快速度：

var $this, $elements = $(selector), i = $elements.length;
while(i--) {
   $this = $elements.eq(i);
}

在jquery中，有没有办法迭代jQuery数组而没有$（this）？

5 个答案:

更新：jQuery plugin以实现所需的“每种语法”：