Recorrer elementos con jQuery: each(), index() y trabajo con colecciones

Cuando un selector encuentra varios elementos, jQuery los trata como una colección. Podemos aplicar métodos a toda la colección o recorrer cada elemento individualmente.

each()

each() ejecuta una función una vez por cada elemento seleccionado.

$(".item").each(function () {
    console.log($(this).text());
});

Dentro de una función tradicional, this representa el elemento actual. Lo envolvemos con $(this) para usar métodos jQuery.

Índice y elemento

$(".item").each(function (indice, elemento) {
    console.log(indice);
    console.log(elemento);
});

El primer argumento es el índice y el segundo es el elemento DOM nativo.

Modificar cada elemento

$(".item").each(function (indice) {
    $(this).text("Elemento " + (indice + 1));
});

index()

index() permite conocer la posición de un elemento dentro de una colección.

$(".item").on("click", function () {
    const posicion = $(".item").index(this);

    console.log(posicion);
});

Aplicar un método a toda la selección

No siempre necesitamos each(). Muchos métodos jQuery se aplican directamente a todos los elementos seleccionados.

$(".item").addClass("activo");

En este caso, jQuery agrega la clase a todos los elementos sin necesidad de recorrerlos manualmente.

Cuándo usar each()

Conviene usarlo cuando cada elemento necesita una lógica distinta, cuando debemos leer datos individuales o cuando necesitamos el índice.

Ejercicio

Creá cinco tarjetas. Recorrelas con each(), numeralas y agregá una clase diferente a las posiciones pares.

Errores comunes

• usar each() cuando un método jQuery ya trabaja con toda la colección;
• usar una arrow function cuando necesitamos this;
• confundir el elemento DOM con el objeto jQuery;
• olvidar que los índices comienzan en 0.

---

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender jQuery, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal

Seguí aprendiendo jQuery

← Efectos y animaciones en jQuery: show, hide, fade y slide

Formularios y validaciones con jQuery →