Esta es una descripción general extensa de la jQuery.each() función: una de las funciones más importantes y más utilizadas de jQuery. En este artículo, descubriremos por qué y veremos cómo puede usarlo.

Este popular artículo se actualizó en 2020 para reflejar las mejores prácticas actuales y para actualizar los consejos de la conclusión sobre soluciones nativas que utilizan JavaScript moderno. Para un conocimiento más profundo de JavaScript, lea nuestro libro, JavaScript: Novato a Ninja, 2a Edición.

¿Qué es jQuery.each ()?

Función each () de jQuery se utiliza para recorrer cada elemento del objeto jQuery de destino, un objeto que contiene uno o más elementos DOM y expone todas las funciones jQuery. Es muy útil para la manipulación DOM de varios elementos, así como para iterar sobre matrices arbitrarias y propiedades de objetos.

Además de esta función, jQuery proporciona una función auxiliar con el mismo nombre que se puede llamar sin haber seleccionado o creado previamente ningún elemento DOM.

Sintaxis de jQuery.each ()

Veamos los diferentes modos en acción.

El siguiente ejemplo selecciona cada <div> elemento en una página web y genera el índice y el ID de cada uno de ellos:

// DOM ELEMENTS
$('div').each(function(index, value) { console.log(`div${index}: ${this.id}`);
});

Un posible resultado sería:

div0:header
div1:main
div2:footer

Esta versión usa jQuery's $(selector).each() función, a diferencia de la función de utilidad.

El siguiente ejemplo muestra el uso de la función de utilidad. En este caso, el objeto a recorrer se da como primer argumento. En este ejemplo, mostraremos cómo recorrer una matriz:

// ARRAYS
const arr = [ 'one', 'two', 'three', 'four', 'five'
]; $.each(arr, function(index, value) { console.log(value); // Will stop running after "three" return (value !== 'three');
}); // Outputs: one two three

En el último ejemplo, queremos demostrar cómo iterar sobre las propiedades de un objeto:

// OBJECTS
const obj = { one: 1, two: 2, three: 3, four: 4, five: 5
}; $.each(obj, function(key, value) { console.log(value);
}); // Outputs: 1 2 3 4 5

Todo esto se reduce a proporcionar una devolución de llamada adecuada. El contexto de la devolución de llamada, this, será igual a su segundo argumento, que es el valor actual. Sin embargo, dado que el contexto siempre será un objeto, los valores primitivos deben ajustarse:

$.each({ one: 1, two: 2 } , function(key, value) { console.log(this);
}); // Number { 1 }
// Number { 2 }

`

Esto significa que no hay una igualdad estricta entre el valor y el contexto.

$.each({ one: 1 } , function(key, value) { console.log(this == value); console.log(this === value);
}); // true
// false

`

El primer argumento es el índice actual, que es un número (para matrices) o una cadena (para objetos).

1. Ejemplo de función básica jQuery.each ()

Veamos cómo la función jQuery.each () nos ayuda junto con un objeto jQuery. El primer ejemplo selecciona todos los a elementos en la página y genera sus href atributo:

$('a').each(function(index, value){ console.log(this.href);
});

El segundo ejemplo genera todos los href en la página web (asumiendo solo el protocolo HTTP (S)):

$('a').each(function(index, value){ const link = this.href; if (link.match(/https?:///)) { console.log(link); }
});

Digamos que tenemos los siguientes enlaces en la página:

<a href="https://www.sitepoint.com/">SitePoint</a>
<a href="https://developer.mozilla.org">MDN web docs</a>
<a href="http://example.com/">Example Domain</a>

El segundo ejemplo daría como resultado:

https://www.sitepoint.com/
https://developer.mozilla.org/
http://example.com/

Debemos tener en cuenta que los elementos DOM de un objeto jQuery están en su forma "nativa" dentro de la devolución de llamada pasada a jQuery.each(). La razón es que jQuery es, de hecho, solo un envoltorio alrededor de una matriz de elementos DOM. Mediante el uso jQuery.each(), esta matriz se itera de la misma manera que una matriz ordinaria. Por lo tanto, no obtenemos elementos envueltos fuera de la caja.

Con referencia a nuestro segundo ejemplo, esto significa que podemos obtener un elemento href atributo escribiendo this.href. Si quisiéramos usar jQuery's attr() método, necesitaríamos volver a envolver el elemento así: $(this).attr('href').

2. Ejemplo de matriz jQuery.each ()

Echemos otro vistazo a cómo se puede manejar una matriz ordinaria:

const numbers = [1, 2, 3, 4, 5];
$.each(numbers, function(index, value){ console.log(`${index}: ${value}`);
});

Este fragmento da como resultado:

0:1
1:2
2:3
3:4
4:5

Nada especial aqui. Una matriz presenta índices numéricos, por lo que obtenemos números a partir de 0 y subiendo a N-1, Donde N es el número de elementos en la matriz.

3. Ejemplo JSON de jQuery.each ()

Es posible que tengamos estructuras de datos más complicadas, como matrices en matrices, objetos en objetos, matrices en objetos u objetos en matrices. Veamos como jQuery.each() puede ayudarnos en tales escenarios:

const colors = [ { 'red': '#f00' }, { 'green': '#0f0' }, { 'blue': '#00f' }
]; $.each(colors, function() { $.each(this, function(name, value) { console.log(`${name} = ${value}`); });
});

Este ejemplo da como resultado:

red = #f00
green = #0f0
blue = #00f

Manejamos la estructura anidada con una llamada anidada a jQuery.each(). La llamada externa maneja la matriz de la variable colors; la llamada interna maneja los objetos individuales. En este ejemplo, cada objeto tiene solo una clave, pero en general, cualquier número podría abordarse con este código.

4. Ejemplo de clase jQuery.each ()

Este ejemplo muestra cómo recorrer cada elemento con la clase asignada productDescription dado en el HTML a continuación:

<div class="productDescription">Red</div>
<div>Pink</div>
<div class="productDescription">Orange</div>
<div class="generalDescription">Teal</div>
<div class="productDescription">Green</div>

Usamos la each() ayudante en lugar del each() método en el selector.

$.each($('.productDescription'), function(index, value) { console.log(index + ':' + $(value).text());
});

En este caso, la salida es:

0:Red
1:Orange
2:Green

No tenemos que incluir índice y valor. Estos son solo parámetros que ayudan a determinar en qué elemento DOM estamos iterando actualmente. Además, en este escenario también podemos utilizar el más conveniente each método. Podemos escribirlo así:

$('.productDescription').each(function() { console.log($(this).text());
});

Y lo obtendremos en la consola:

Red
Orange
Green

Tenga en cuenta que estamos envolviendo el elemento DOM en una nueva instancia de jQuery, de modo que podamos usar jQuery's text() Método para obtener el contenido de texto del elemento.

5. Ejemplo de retardo de jQuery.each ()

En el siguiente ejemplo, cuando el usuario hace clic en el elemento con el ID 5demo todos los elementos de la lista se establecerán en naranja inmediatamente.

<ul id="5demo"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li>
</ul>

Después de un retraso dependiente del índice (0, 200, 400, ... milisegundos) atenuamos el elemento:

$('#5demo').on('click', function(e) { $('li').each(function(index) { $(this).css('background-color', 'orange') .delay(index * 200) .fadeOut(1500); }); e.preventDefault();
});

Conclusión

En esta publicación, demostramos cómo usar el jQuery.each() función para iterar sobre elementos DOM, matrices y objetos. Es una pequeña función poderosa y que ahorra tiempo que los desarrolladores deberían tener en sus kits de herramientas.

Y si jQuery no es lo tuyo, es posible que desees utilizar el código nativo de JavaScript. Object.keys () y Array.prototype.forEach () métodos. También hay bibliotecas como foreach que le permiten iterar sobre los pares clave-valor de un objeto tipo matriz o un objeto tipo diccionario.

Recuerde: $.each() y $(selector).each() son dos métodos diferentes definidos de dos formas diferentes.

Fuente: https://www.sitepoint.com/jquery-each-function-examples/?utm_source=rss