JQUERY EACH()-METODEN

De Hver() metode i jQuery spesifiserer en funksjon som kjører for hvert matchende element. Det er en av de mye brukte traverseringsmetodene i JQuery. Ved å bruke denne metoden kan vi iterere over DOM-elementene til jQuery-objektet og kan utføre en funksjon for hvert matchende element.

De Hver() godtar en parameter funksjon (indeks, element) som er en tilbakeringingsfunksjon som kjøres for hvert valgt element. Denne funksjonen krever videre valgfritt to parametere som er indeks og element. Så vi må sende en tilbakeringingsfunksjon til each()-metoden.

Vi kan også komme tilbake falsk fra tilbakeringingsfunksjonen for å stoppe sløyfen tidlig.

Syntaks

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

Parameterverdier

Parameterverdiene som brukes i Hver() metoden er definert som følger.

funksjon(indeks,element): Det er en obligatorisk parameter. Det er en tilbakeringingsfunksjon som kjøres for hvert valgt element. Den har to parameterverdier som er definert som følger.

indeks:Det er en heltallsverdi som spesifiserer indeksposisjonen til velgeren.element:Det er det nåværende elementet. Vi kan bruke dette søkeordet til å referere til det aktuelle elementet.

La oss se noen illustrasjoner for å forstå Hver() metode klart.

Eksempel 1

I dette eksemplet er Hver() metoden utløses når du klikker på knappen. Vi bruker denne metoden på at elementer. Så denne metoden vil iterere over hver at element. Funksjonen utføres for hver valgt at og viser teksten til den tilsvarende at element ved hjelp av varslingsboks.

Her bruker vi ikke parameterverdiene til tilbakeringingsfunksjonen.

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

Produksjon

Test det nå

Etter utførelse av koden ovenfor, vil utgangen være -

Når du klikker på knappen, vil et varsel vises som følger.

På samme måte vil fire varslingsbokser vises på grunn av fire at elementer.

Eksempel 2

I dette eksemplet bruker vi parameterverdiene til tilbakeringingsfunksjonen som er indeks og element .

Vi bruker Hver() metode på at elementer. Så, metoden vil iterere over li-elementene fra indeksen 0 . Det vil kjøre på hver valgt at element og endre bakgrunnsfargen til det tilsvarende elementet.

Iterasjonen stopper når funksjonen kommer tilbake falsk . Her er det seks at elementer, og funksjonen stopper når den når elementet med id = 'i4' . Selv om det er det fjerde elementet, men indeksen starter kl 0 , så posisjonen til elementet er 3 .

java-streng sammenlignet

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