Trabajo con el método each en jQuery

Cuando tenemos un grupo de elementos obtenidos con jQuery, solo podemos realizar cambios en ellos para todos los elementos simultáneamente.

Por ejemplo, si queremos cambiar el texto de todos los párrafos encontrados, no podremos hacerlo diferente para cada uno.

En este caso nos ayudará el método especial each, que permite aplicar una función a todos los elementos de un conjunto jQuery. Dentro de esta función podremos distinguir los elementos y actuar de forma diferente con cada uno de ellos.

En esencia, each es un bucle con el cual se pueden recorrer todos los elementos encontrados. La referencia al elemento por el que pasa el bucle en cada momento estará en this.

Podemos simplemente usar este this en JavaScript puro, como lo hacíamos antes, por ejemplo, así - this.innerHTML - y mostrar el contenido interno de nuestros elementos. Pero es mejor envolver this en el símbolo de jQuery de esta manera - $(this) - en este caso podremos aplicarle todos los métodos y encadenamientos de jQuery.

Veamos el siguiente código HTML:

<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>

En este ejemplo debemos obtener todos los elementos con la clase www y mostrar en pantalla su contenido. Cómo se hace: con $('.www') obtenemos los elementos que necesitamos, luego con each(test) aplicamos la función test a cada elemento obtenido. Primero se aplicará al primer párrafo, luego al segundo, al tercero y así sucesivamente.

Dentro de la función, this hará referencia al elemento al que se aplica la función test - primero será el primer elemento, luego el segundo, y así sucesivamente. Con una constructura como $(this), en lugar del this normal de JavaScript obtendremos un elemento jQuery y le aplicaremos el método html, que obtendrá el texto de nuestro elemento. Luego, simplemente se mostrará en pantalla:

/*
	Escribimos el nombre de la función test sin comillas y (),
	porque necesitamos su código, no el resultado:
*/

$('.www').each(test);

function test() {
	alert($(this).html());
}

Para resolver esta tarea también se pueden usar funciones anónimas - es lo más común:

$('.www').each(function() {
	alert($(this).html());
});

También podemos pasarle al método each una función callback con parámetros.

En el siguiente ejemplo, agreguemos al final de todos los li en la página su número de orden. Ahora a nuestra función anónima le pasaremos el índice del elemento y el elemento mismo:

$('li').each(function (index, elem) {
	$(elem).append(index);
});

Y ahora usemos this en lugar de elem:

$('li').each(function (index) {
	$(this).append(index);
});

Cambie el contenido de todos los li por su número de orden.