Tutorial de jQuery.each: cómo utilizar la iteración de código

En este breve tutorial te explicamos cómo iterar a través de un grupo de elementos y realizar acciones utilizando jQuery.each().

¿Qué es jQuery.each()?

JQuery.each() es un método de la librería JavaScript 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 JavaScript. En nuestro tutorial jQuery aprenderá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 parámetros consisten en el índice o clave del elemento y el propio elemento. La indexació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 seleccionar elementos DOM, se utiliza .each() con selectores jQuery:

$(selector).each()
jQuery

A continuación, se seleccionan todos los elementos de la lista desordenada “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 manipulaciones complejas del DOM.

Nota

En algunas situaciones, 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 combinació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 especialmente útil en el contexto de los eventos JavaScript. En el siguiente ejemplo, un evento de clic cambia el color de los elementos div. Opcionalmente, el código puede incluirse directamente en el script tag del documento HTML. Inicialmente, el color de los contenedores 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 transiciones o animaciones 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
¿Le ha resultado útil este artículo?