Rediseando el mtodo each() en jQuery

Introduccin
Una de las funcionalidades ms interesantes de jQuery es la posibilidad de recorrer todos los elementos de un set (coleccin de elementos) mediante el mtodo interno each. Gracias a esta funcin, podemos realizar cualquier accin sobre cada uno de los elementos que un selector haya recopilado. Su sintaxis es la siguiente:
jQuery.each( collection, callback(indexInArray, valueOfElement) )

Donde: - collection es los elemento sobre el objeto o array que del iteramos en un momento queremos recorrer. objeto. dado.

- callback es la funcin que queremos aplicar sobre cada uno de elementos el que - indexInArray corresponde, dentro del callback, al ndice del - valueOfElement es el valor del elemento.

Uso bsico
Como es posible aadir este mtodo a una cadena de acciones, su uso ms frecuente es el siguiente:
$('a').each( function(){
// Do something... });

Con el ejemplo anterior, estaramos seleccionando todas las etiquetas a (anchors) dentro de nuestro documento para pasar a recorrerlas una a una. Por lo general, el fin de este mtodo es aplicar una accin sobre cada uno de los elementos seleccionados, por lo que necesitamos de algn modo referenciarlos. Lo ms comn es recurrir a this y cachearlo:
$('a').each( function(){

var $this = $(this);

$this.css( 'text-decoration' , 'underline' );

});

NOTA: Precachear los objetos jQuery en lugar de referenciarlos directamente es una buena prctica ya que permite guardar la referencia para usarla ms adelante evitando volver a localizar el elemento en el DOM. Para ms informacin, puede consultarse Cacheando objetos en jQuery.

El problema
El gran problema que presenta la estructura anterior es que puede resultar muy pesada recorriendo grandes conjuntos de datos. Esto es porque, en cada iteracin, tiene que volver a localizarse el elemento en el DOM y seleccionarse, provocando as la correspondiente penalizacin en rendimiento. Una forma de mejorar notablemente la velocidad de each, es crear un placeholder o marcador de contexto que delimite la ubicacin del elemento sobre el que estamos iterando. Sera algo equivalente a cuando en un selector normal, indicamos el contexto en el que queremos buscar:
$('a', '#myLayer'); // Select all <a> elements within #myLayer context

Este mtodo resultara mucho ms rpido en aquellos casos en los que necesitemos actuar directamente sobre $this aunque ms lento cuando no. Por ello, lo ms interesante es disponer de ambas soluciones y utilizar cada una segn lo necesitemos. La solucin idnea es crear un sencillo plugin para nuestro nuevo each.

Mtodo each optimizado

El siguiente ejemplo se lo debemos a Ben Alman (@cowboy) basndose en un trabajo previo de James Padolsey:
(function($) { var $this = $([1]);

$.fn.each2 = function( fn ) { var i = -1;

while ( ( $this.context = $this[0] = this[++i] ) && fn.call( $this[0], i, $this ) !== false ) {} return this; }; })(jQuery);

Eso es todo. Su uso es muy sencillo:

$('a').each2(function( i, $this ){ $this.css('text-decoration', 'underline');
});

this ahora est contenido en la variable $this la cual hemos

predefinido de forma interna en nuestro plugin despus de asignarle un contexto. No hemos necesitado re seleccionarla y el incremento en rendimiento es ms que notable cuando trabajamos con conjuntos grandes. Para ver la tabla comparativa entre este mtodo y el original, podemos visitar la pgina de pruebas montada en JsPerf.

Conclusin
Los tests son concluyentes: con el nuevo mtodo, ganamos del orden de un 500% de rendimiento, algo que no puede ser pasado por alto cuando se trata de aplicaciones de gran arquitectura o muy exigentes en cuanto a clculo.