JQUERY EVERY()-METODI

The jokainen () jQuery-metodi määrittää funktion, joka suoritetaan jokaiselle vastaavalle elementille. Se on yksi JQueryn laajalti käytetyistä läpikulkumenetelmistä. Tätä menetelmää käyttämällä voimme iteroida jQuery-objektin DOM-elementtejä ja suorittaa funktion jokaiselle vastaavalle elementille.

The jokainen () hyväksyy parametrin funktio (indeksi, elementti) joka on takaisinsoittotoiminto, joka suoritetaan jokaiselle valitulle elementille. Tämä toiminto vaatii lisäksi valinnaisesti kaksi parametria, jotka ovat indeksi ja elementti. Joten meidän on välitettävä takaisinkutsutoiminto jokaiselle ()-menetelmälle.

Voimme myös palata väärä takaisinsoittotoiminnosta lopettaaksesi silmukan aikaisin.

Syntaksi

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

Parametrien arvot

Käytetyt parametriarvot jokainen () menetelmät määritellään seuraavasti.

funktio (indeksi, elementti): Se on pakollinen parametri. Se on takaisinsoittotoiminto, joka suoritetaan jokaiselle valitulle elementille. Siinä on kaksi parametriarvoa, jotka määritellään seuraavasti.

indeksi:Se on kokonaislukuarvo, joka määrittää valitsimen indeksipaikan.elementti:Se on nykyinen elementti. Voimme käyttää tätä avainsanaa viittaamaan tällä hetkellä vastaavaan elementtiin.

Katsotaanpa joitain kuvia ymmärtääksemme jokainen () menetelmä selkeästi.

Esimerkki1

Tässä esimerkissä jokainen () menetelmä käynnistyy, kun napsautat painiketta. Käytämme tätä menetelmää että elementtejä. Joten tämä menetelmä toistuu jokaisessa että elementti. Toiminto suoritetaan jokaiselle valitulle että ja näyttää vastaavan tekstin että elementti hälytysruudun avulla.

Tässä emme käytä takaisinsoittofunktion parametriarvoja.

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

Lähtö

Testaa nyt

Yllä olevan koodin suorittamisen jälkeen tulos on -

Kun napsautat painiketta, näkyviin tulee seuraavanlainen hälytys.

Vastaavasti neljä hälytysruutua näytetään neljän vuoksi että elementtejä.

Esimerkki2

Tässä esimerkissä käytämme takaisinsoittofunktion parametriarvoja, jotka ovat indeksi ja elementti .

Sovellamme jokainen () menetelmä päällä että elementtejä. Joten menetelmä iteroi li-elementtien yli indeksistä alkaen 0 . Se suoritetaan jokaiselle valitulle että elementtiä ja muuta vastaavan elementin taustaväriä.

Iteraatio pysähtyy, kun funktio palaa väärä . Tässä on kuusi että elementtejä, ja funktio pysähtyy, kun se saavuttaa elementin kanssa id = 'i4' . Vaikka se on neljäs elementti, mutta indeksi alkaa 0 , joten elementin sijainti on 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; } }); }); }