jQuery each2 plugin vs jQuery core .each method (v36)

Revision 36 of this benchmark created by Doug Gale on

Description

Basically, if you're going to do $(this) inside an .each loop, you should consider using the jQuery each2 plugin instead, because it's specifically optimized for this extremely common use case!

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<!-- the plugin -->
<!--script src="http://github.com/cowboy/jquery-misc/raw/master/jquery.ba-each2.js"></script-->
<script>
/*!
 * jQuery each2 - v0.2 - 8/02/2010
 * http://benalman.com/projects/jquery-misc-plugins/
 * 
 * Inspired by James Padolsey's quickEach
 * http://gist.github.com/500145
 * 
 * Copyright (c) 2010 "Cowboy" Ben Alman
 * Dual licensed under the MIT and GPL licenses.
 * http://benalman.com/about/license/
 */

(function($) {
  
  // Create a placeholder jQuery object with a length of 1. The single item
  // is completely arbitrary and will be replaced.
  var jq = $([1]);
  
  $.fn.each2 = function( fn ) {
    var i = -1;
    
    while (
      // Set both the first element AND context property of the placeholder
      // jQuery object to the DOM element. When i has been incremented past the
      // end, this[++i] will return undefined and abort the while loop.
      ( jq.context = jq[0] = this[++i] )
      
      // Invoke the callback function in the context of the DOM element,
      // passing both the index and the placeholder jQuery object in. Like
      // .each, if the callback returns `false`, abort the while loop.
      && fn.call( jq[0], i, jq ) !== false
    ) {}
    
    // Return the initial jQuery object for chainability.
    return this;
  };
  
})(jQuery);
</script>

<script>
(function($) {
    $.fn.eachElement = function(callback) {
        for (var i = 0; i < this.length; ++i) {
            var element = this.eq(i);
            callback.call(element, i, element);
        }
    };
}(jQuery));
</script>

<script>
  // Create a whole bunch of elements for iteration.
  var elems = $('<div/>').append(Array(1000).join('<span/>')).children();
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery each2 plugin
elems.each2(function(i, jq) {
 this; // DOM element
 jq; // jQuery object
});
ready
jQuery core .each method
elems.each(function(i, elem) {
 this; // DOM element
 $(this); // jQuery object
});
ready
eachElement
elems.eachElement(function(i, elem) {
 this; // DOM element
 $(this); // jQuery object
});
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.