MÉTODO JQUERY CADA()

El cada() El método en jQuery especifica una función que se ejecuta para cada elemento coincidente. Es uno de los métodos de recorrido más utilizados en JQuery. Usando este método, podemos iterar sobre los elementos DOM del objeto jQuery y ejecutar una función para cada elemento coincidente.

El cada() acepta un parámetro función (índice, elemento) que es una función de devolución de llamada que se ejecuta para cada elemento seleccionado. Esta función requiere además, opcionalmente, dos parámetros que son índice y elemento. Entonces, tenemos que pasar una función de devolución de llamada al método each().

También podemos regresar FALSO desde la función de devolución de llamada para detener el ciclo antes de tiempo.

Sintaxis

 $(selector).each(function(index, element))

Valores paramétricos

Los valores de los parámetros utilizados en cada() método se definen de la siguiente manera.

función (índice, elemento): Es un parámetro obligatorio. Es una función de devolución de llamada que se ejecuta para cada elemento seleccionado. Tiene dos valores de parámetros que se definen de la siguiente manera.

índice:Es un valor entero que especifica la posición del índice del selector.elemento:Es el elemento actual. Podemos utilizar esta palabra clave para hacer referencia al elemento coincidente actualmente.

Veamos algunas ilustraciones para entender el cada() método claramente.

Ejemplo 1

En este ejemplo, el cada() El método se activará al hacer clic en el botón. Estamos aplicando este método a la eso elementos. Entonces, este método iterará sobre cada eso elemento. La función se ejecuta para cada seleccionado. eso y muestra el texto del correspondiente eso elemento usando el cuadro de alerta.

Aquí, no utilizamos los valores de los parámetros de la función de devolución de llamada.

 jQuery each() method <h2> Welcome to the javaTpoint.com </h2> <ul> <li> First element </li> <li> Second element </li> <li> Third element </li> <li> Fourth element </li> </ul> <p> Click the following button to see the list of <b> li </b> elements. </p> Click me function fun(){ $(document).ready(function(){ $(&apos;li&apos;).each(function(){ alert($(this).text()) }); }); }

Producción

Pruébalo ahora

Después de la ejecución del código anterior, el resultado será:

Al hacer clic en el botón, se mostrará una alerta de la siguiente manera.

De manera similar, se mostrarán cuatro cuadros de alerta debido a cuatro eso elementos.

Ejemplo2

En este ejemplo, estamos utilizando los valores de los parámetros de la función de devolución de llamada que son índice y elemento .

Estamos aplicando el cada() método en eso elementos. Entonces, el método iterará sobre los elementos li comenzando desde el índice 0 . Se ejecutará en cada seleccionado. eso elemento y cambiar el color de fondo del elemento correspondiente.

La iteración se detiene una vez que la función regresa. FALSO . Aquí hay seis eso elementos, y la función se detiene cuando llega al elemento con identificación = 'i4' . Aunque es el cuarto elemento, el índice comienza en 0 , por lo que la posición del elemento es 3 .

 jQuery each() method body{ text-align: center; } ul{ list-style-type: none; float: left; } li { width: 40px; height: 40px; margin: 5px; padding: 5px; font-size: 20px; float: left; border: 2px solid blue; } button{ font-size: 20px; } <h2> Welcome to the javaTpoint.com </h2> <ul> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li id="i4"> Stop </li> <li> 5 </li> <li> 6 </li> </ul> Click me function fun() { $(document).ready(function(){ $(&apos;li&apos;).each(function(index, element) { $(element).css(&apos;background&apos;, &apos;lightgreen&apos;); if ($(this).is(&apos;#i4&apos;)) { $(&apos;p&apos;).text(&apos;Index begins with 0. So, the function stopped at position: &apos; + index ).css(&apos;fontSize&apos;, &apos;20px&apos;); return false; } }); }); }