Question

I know the standard way of doing it:

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

But this is a little bit cumbersome because we need to use $(this) everywhere and this causes a performance penalty as shown by http://jsperf.com/jquery-each-this.

I am looking for a way to iterate over a jQuery array/selector with this bound to the jQuery wrapper instead of to the DOM element.

Answer 1

You can use an ordinary loop. and use .slice(index, 1) to get the corresponding jQuery object.

.eq() does the same thing, and maps to .slice(), so .slice(i, 1) is more efficient than .eq(index).

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

Notice that the closure is not present. If you want to use closures, create a temporary function:

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));
}

Update: A jQuery plugin to achieve your desired “each-syntax”:

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