JQUERY EACH()-METHODE

De elk() methode in jQuery specificeert een functie die wordt uitgevoerd voor elk overeenkomend element. Het is een van de meest gebruikte traversing-methoden in JQuery. Met deze methode kunnen we de DOM-elementen van het jQuery-object herhalen en een functie uitvoeren voor elk overeenkomend element.

De elk() accepteert een parameter functie(index,element) Dit is een callback-functie die wordt uitgevoerd voor elk geselecteerd element. Deze functie vereist verder optioneel twee parameters: index en element. We moeten dus een callback-functie doorgeven aan de Each()-methode.

Wij kunnen ook terugkeren vals van de callback-functie om de lus vroegtijdig te stoppen.

Syntaxis

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

Parameterwaarden

De parameterwaarden die worden gebruikt in elk() methode worden als volgt gedefinieerd.

functie(index,element): Het is een verplichte parameter. Het is een callback-functie die voor elk geselecteerd element wordt uitgevoerd. Het heeft twee parameterwaarden die als volgt worden gedefinieerd.

invoegsortering in Java

inhoudsopgave:Het is een geheel getal dat de indexpositie van de selector specificeert.element:Het is het huidige element. We kunnen dit trefwoord gebruiken om naar het momenteel overeenkomende element te verwijzen.

Laten we enkele illustraties bekijken om het te begrijpen elk() methode duidelijk.

Voorbeeld 1

In dit voorbeeld is de elk() methode wordt geactiveerd zodra u op de knop klikt. Deze methode passen wij toe op de Dat elementen. Deze methode herhaalt dus elke methode Dat element. De functie wordt uitgevoerd voor elke geselecteerde Dat en geeft de tekst van het overeenkomstige weer Dat element met behulp van een waarschuwingsvenster.

Hier gebruiken we niet de parameterwaarden van de callback-functie.

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

Uitvoer

instantiëren van Java

Test het nu

Na de uitvoering van de bovenstaande code zal de uitvoer zijn:

Als u op de knop klikt, wordt een waarschuwing als volgt weergegeven.

Op dezelfde manier worden er vier waarschuwingsvakken weergegeven vanwege vier Dat elementen.

Voorbeeld2

In dit voorbeeld gebruiken we de parameterwaarden van de callback-functie die dat wel zijn inhoudsopgave En element .

Wij passen de elk() methode aan Dat elementen. De methode herhaalt dus de li-elementen, beginnend bij de index 0 . Het wordt uitgevoerd op elke geselecteerde Dat element en wijzig de achtergrondkleur van het overeenkomstige element.

De iteratie stopt zodra de functie terugkeert vals . Hier zijn het er zes Dat elementen, en de functie stopt wanneer deze het element bereikt met ID = 'i4' . Hoewel het het vierde element is, begint de index bij 0 , dus de positie van het element is 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; } }); }); }