En este breve tutorial te ex­pli­ca­mos cómo iterar a través de un grupo de elementos y realizar acciones uti­li­za­n­do jQuery.each().

¿Qué es jQuery.each()?

JQuery.each() es un método de la librería Ja­va­S­cri­pt jQuery. Se utiliza para iterar sobre una colección de elementos como arrays u objetos y realizar ciertas acciones. Por lo tanto, .each() es muy útil para manipular el Document Object Model (DOM), que es una interfaz entre HTML y Ja­va­S­cri­pt. En nuestro tutorial jQuery apre­n­de­rás a integrar esta popular librería.

La sintaxis de jQuery.each()

Con .each(), se itera sobre cada elemento de una colección y se ejecuta una función por iteración. Existen dos tipos de .each(). Su sintaxis genérica es:

$.each(object, callback)
jQuery

En este caso, “object” es un array u objeto y “callback” es la función que se llama en cada ejecución. Sus pa­rá­me­tros consisten en el índice o clave del elemento y el propio elemento. La in­de­xa­ción de los elementos de un array comienza en la posición 0.

En el siguiente ejemplo, se recorren todos los elementos de la matriz “arr” y el índice y el valor se muestran en la consola en cada iteración.

var arr = ["blue", "yellow", "red"];
$.each(arr, function(index, value) {
    console.log(index + ": " + value);
});
jQuery

El resultado es este:

0: blue
1: yellow
2: red
jQuery

Para se­le­c­cio­nar elementos DOM, se utiliza .each() con se­le­c­to­res jQuery:

$(selector).each()
jQuery

A co­n­ti­nua­ción, se se­le­c­cio­nan todos los elementos de la lista des­or­de­na­da “alfabeto” y se muestra su posición y su contenido a través de la consola. La palabra clave “this” se refiere al elemento.

<ul id="alphabet">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
jQuery
$("li").each(function(index) {
    console.log( index + ": " + $(this).text() );
});
jQuery

Esto nos da este resultado:

0: a
1: b
2: c
jQuery

Ejemplos de uso del método

Con la ayuda de jQuery.each() se pueden realizar ma­ni­pu­la­cio­nes complejas del DOM.

Nota

En algunas si­tua­cio­nes, la iteración implícita en lugar de .each() es útil, ya que algunos métodos de jQuery también iteran a través de todos los elementos de una colección.

Para añadir el mismo nombre de clase a todos los elementos div, puedes utilizar la función .addClass() en co­m­bi­na­ción con .each().

<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
jQuery
$("div").each(function() {
    $(this).addClass("container");
});
jQuery

El resultado es el siguiente:

<div class="header container"></div>
<div class="main container"></div>
<div class="footer container"></div>
jQuery

El mismo código puede acortarse mediante iteración implícita:

$("div").addClass("container");
jQuery

.each() es es­pe­cia­l­me­n­te útil en el contexto de los eventos Ja­va­S­cri­pt. En el siguiente ejemplo, un evento de clic cambia el color de los elementos div. Op­cio­na­l­me­n­te, el código puede incluirse di­re­c­ta­me­n­te en el script tag del documento HTML. Ini­cia­l­me­n­te, el color de los co­n­te­ne­do­res es “verde”. Cuando se hace un clic dentro del documento, se evalúa la condición y el valor del color cambia a “rojo”. Si se hace otro clic, la propiedad “color” vuelve al valor por defecto de “verde”.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <style>
    div {
        color: green;
        text-align: center;
        cursor: pointer;
        width: 300px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div>Haz clic aquí</div>
<div>para cambiar</div>
<div>el color.</div>
<script>
$(document.body).click(function() {
    $("div").each(function(i) {
        if (this.style.color !== "red") {
            this.style.color = "red";
        } else {
            this.style.color = "";
        }
    });
});
</script>
</body>
</html>
jQuery

Además, puedes realizar tra­n­si­cio­nes o ani­ma­cio­nes con jQuery.each(). En este ejemplo, los elementos de la lista “números” reciben un color de fondo azul durante un evento de clic y se ocultan uno tras otro después de un intervalo de tiempo basado en índices.

<ul id="numbers">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
jQuery
$("#numbers").on("click", function(e) {
    $("li").each(function(index) {
        $(this).css("background-color", "blue")
                     .delay(index * 300)
                     .fadeOut(2000);
    });
    e.preventDefault();
});
jQuery
Ir al menú principal