METODO JQUERY CIASCUNO()

IL ogni() Il metodo in jQuery specifica una funzione che viene eseguita per ogni elemento corrispondente. È uno dei metodi di attraversamento ampiamente utilizzati in JQuery. Usando questo metodo, possiamo scorrere gli elementi DOM dell'oggetto jQuery ed eseguire una funzione per ogni elemento corrispondente.

IL ogni() accetta un parametro funzione(indice,elemento) che è una funzione di callback che viene eseguita per ogni elemento selezionato. Questa funzione richiede inoltre facoltativamente due parametri che sono indice ed elemento. Quindi, dobbiamo passare una funzione di callback al metodo ciascuno().

Possiamo anche tornare falso dalla funzione di callback per interrompere anticipatamente il ciclo.

Sintassi

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

Valori dei parametri

I valori dei parametri utilizzati in ogni() metodo sono definiti come segue.

funzione(indice,elemento): È un parametro obbligatorio. È una funzione di callback che viene eseguita per ogni elemento selezionato. Ha due valori di parametro definiti come segue.

indice:È un valore intero che specifica la posizione dell'indice del selettore.elemento:È l'elemento attuale. Possiamo usare questa parola chiave per fare riferimento all'elemento attualmente corrispondente.

Vediamo alcune illustrazioni per comprendere il ogni() metodo in modo chiaro.

Esempio 1

In questo esempio, il ogni() il metodo verrà attivato facendo clic sul pulsante. Stiamo applicando questo metodo al Quello elementi. Quindi, questo metodo verrà ripetuto su ciascuno Quello elemento. La funzione viene eseguita per ogni selezionato Quello e visualizza il testo del corrispondente Quello elemento utilizzando la casella di avviso.

Qui non stiamo utilizzando i valori dei parametri della funzione di callback.

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

Produzione

Provalo adesso

Dopo l'esecuzione del codice sopra, l'output sarà:

Facendo clic sul pulsante, verrà visualizzato un avviso come segue.

Allo stesso modo, verranno visualizzate quattro caselle di avviso a causa di quattro Quello elementi.

conchiglia bourne-again

Esempio2

In questo esempio, stiamo utilizzando i valori dei parametri della funzione di callback che sono indice E elemento .

Stiamo applicando il ogni() metodo attivo Quello elementi. Pertanto, il metodo eseguirà l'iterazione sugli elementi li a partire da index 0 . Verrà eseguito su ciascun selezionato Quello elemento e modificare il colore di sfondo dell'elemento corrispondente.

L'iterazione si interrompe una volta restituita la funzione falso . Qui ce ne sono sei Quello elementi e la funzione si interrompe quando raggiunge l'elemento con id = 'i4' . Sebbene sia il quarto elemento, ma l'indice inizia da 0 , quindi la posizione dell'elemento è 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; } }); }); }