JQUERY EACH()-METODEN

De varje() metod i jQuery specificerar en funktion som körs för varje matchat element. Det är en av de mycket använda traversingmetoderna i JQuery. Med den här metoden kan vi iterera över DOM-elementen i jQuery-objektet och kan köra en funktion för varje matchat element.

if uttalande java

De varje() accepterar en parameter funktion (index, element) vilket är en återuppringningsfunktion som körs för varje valt element. Denna funktion kräver ytterligare två parametrar som är index och element. Så vi måste skicka en callback-funktion till each()-metoden.

Vi kan också återvända falsk från återuppringningsfunktionen för att stoppa loopen tidigt.

Syntax

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

Parametervärden

De parametervärden som används i varje() metod definieras enligt följande.

funktion(index,element): Det är en obligatorisk parameter. Det är en återuppringningsfunktion som körs för varje valt element. Den har två parametervärden som definieras enligt följande.

index:Det är ett heltalsvärde som anger väljarens indexposition.element:Det är det nuvarande elementet. Vi kan använda det här nyckelordet för att referera till det för närvarande matchade elementet.

Låt oss se några illustrationer för att förstå varje() metod tydligt.

Exempel1

I det här exemplet är varje() metoden utlöses när du klickar på knappen. Vi tillämpar denna metod på den där element. Så den här metoden kommer att upprepas över var och en den där element. Funktionen exekveras för varje vald den där och visar texten för motsvarande den där element med varningsruta.

Här använder vi inte parametervärdena för återuppringningsfunktionen.

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

Produktion

Testa det nu

Efter exekvering av ovanstående kod kommer utgången att vara -

När du klickar på knappen kommer en varning att visas enligt följande.

På samma sätt kommer fyra varningsrutor att visas på grund av fyra den där element.

Exempel 2

I det här exemplet använder vi parametervärdena för återuppringningsfunktionen som är index och element .

j e s t

Vi tillämpar varje() metod på den där element. Så, metoden itererar över li-elementen från index 0 . Det kommer att köras på varje vald den där element och ändra bakgrundsfärgen för motsvarande element.

Iterationen stoppas när funktionen återvänder falsk . Här är det sex den där element, och funktionen stannar när den når elementet med id = 'i4' . Även om det är det fjärde elementet, men indexet börjar kl 0 , så elementets position är 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; } }); }); }