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)
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);
});
El resultado es este:
0: blue
1: yellow
2: red
Para seleccionar elementos DOM, se utiliza .each() con selectores jQuery:
$(selector).each()
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>
$("li").each(function(index) {
console.log( index + ": " + $(this).text() );
});
Esto nos da este resultado:
0: a
1: b
2: c
Ejemplos de uso del método
Con la ayuda de jQuery.each() se pueden realizar manipulaciones complejas del DOM.
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>
$("div").each(function() {
$(this).addClass("container");
});
El resultado es el siguiente:
<div class="header container"></div>
<div class="main container"></div>
<div class="footer container"></div>
El mismo código puede acortarse mediante iteración implícita:
$("div").addClass("container");
.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>
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>
$("#numbers").on("click", function(e) {
$("li").each(function(index) {
$(this).css("background-color", "blue")
.delay(index * 300)
.fadeOut(2000);
});
e.preventDefault();
});
Artículos similares
Las librerías y los frameworks JavaScript más populares
Quien haya trabajado con JavaScript conoce la complejidad del DOM (Document Object Model). Para facilitar su manejo entran en juego los frameworks y las librerías, con los que los desarrolladores pueden hacerse eco de funciones que les hagan el trabajo más sencillo. Sin embargo, es inevitable preguntarse por los mejores frameworks y librerías JavaScript y por las diferencias que existen entre…
REDPIXEL.PLShutterstock PHP vs. JavaScript: una comparación de ambos lenguajes de programación
El duelo entre PHP vs. JavaScript existe desde 1995. Para saber qué lenguaje de scripting es mejor para tu proyecto, hay que tener en cuenta no solo el tipo de proyecto, sino también sus requisitos. Aquí encontrarás todo sobre ambos contrincantes, sus características comunes y diferencias. Podrás decidir si te conviene más PHP o JavaScript.
Insertar JavaScript en WordPress: formas e instrucciones
Los scripts de JavaScript son una herramienta práctica para insertar contenido interactivo en las páginas web. Sin embargo, para evitar problemas con códigos maliciosos, WordPress solo permite por defecto la integración de JavaScript a los administradores. A continuación, te mostramos cómo habilitar JavaScript para todos los usuarios del backend.
