JQUERY EACH() MÈTODE

El cadascun () El mètode de jQuery especifica una funció que s'executa per a cada element coincident. És un dels mètodes de recorregut àmpliament utilitzats a JQuery. Mitjançant aquest mètode, podem iterar sobre els elements DOM de l'objecte jQuery i podem executar una funció per a cada element coincident.

El cadascun () accepta un paràmetre funció (índex, element) que és una funció de devolució de trucada que s'executa per a cada element seleccionat. Aquesta funció també requereix opcionalment dos paràmetres que són índex i element. Per tant, hem de passar una funció de devolució de trucada al mètode each().

També podem tornar fals de la funció de devolució de trucada per aturar el bucle abans d'hora.

Sintaxi

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

Valors dels paràmetres

Els valors dels paràmetres utilitzats a cadascun () mètode es defineixen de la següent manera.

funció (índex, element): És un paràmetre obligatori. És una funció de devolució de trucada que s'executa per a cada element seleccionat. Té dos valors de paràmetre que es defineixen de la següent manera.

índex:És un valor enter que especifica la posició de l'índex del selector.element:És l'element actual. Podem utilitzar aquesta paraula clau per fer referència a l'element que coincideix actualment.

Vegem algunes il·lustracions per entendre-ho cadascun () mètode clarament.

Exemple 1

En aquest exemple, el cadascun () El mètode s'activarà en fer clic al botó. Estem aplicant aquest mètode al això elements. Per tant, aquest mètode repetirà sobre cadascun això element. La funció s'executa per a cada seleccionat això i mostra el text del corresponent això element utilitzant el quadre d'alerta.

Aquí, no estem utilitzant els valors dels paràmetres de la funció de devolució de trucada.

 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()) }); }); }

Sortida

Prova-ho ara

Després de l'execució del codi anterior, la sortida serà -

En fer clic al botó, es mostrarà una alerta de la següent manera.

De la mateixa manera, es mostraran quatre quadres d'alerta a causa de quatre això elements.

Exemple 2

En aquest exemple, estem utilitzant els valors dels paràmetres de la funció de devolució de trucada que són índex i element .

Estem aplicant el cadascun () mètode activat això elements. Per tant, el mètode iterarà sobre els elements li a partir de l'índex 0 . S'executarà a cada seleccionat això element i canvieu el color de fons de l'element corresponent.

La iteració s'atura un cop torna la funció fals . Aquí, n'hi ha sis això elements, i la funció s'atura quan arriba a l'element amb id = 'i4' . Encara que és el quart element, però l'índex comença a 0 , de manera que la posició de l'element és 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; } }); }); }