Arbeid med metoden each i jQuery

Når vi har en gruppe elementer hentet med jQuery, kan vi bare gjøre endringer i dem for alle elementene samtidig.

For eksempel, hvis vi vil endre teksten til alle funnede avsnitt - vil vi ikke kunne gjøre den forskjellig.

I dette tilfellet hjelper den spesielle metoden each, som lar oss bruke en funksjon på alle elementene i et jQuery-sett. Inne i denne funksjonen kan vi skille elementene og håndtere hver av dem forskjellig.

I bunn og grunn er each en løkke som kan brukes til å iterere gjennom alle de funnede elementene. En referanse til det elementet som løkken for øyeblikket behandler vil ligge i this.

Vi kan ganske enkelt bruke denne this i ren JavaScript, som vi gjorde tidligere, for eksempel slik - this.innerHTML - og vise det interne innholdet i elementene våre. Men det er bedre å pakke inn this i jQuery-dollar slik - $(this) - på denne måten kan vi bruke alle jQuery-metodene og kjeder på den.

La oss se på følgende HTML-kode:

html<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>

I dette eksempelet skal vi hente alle elementer med klassen www og vise innholdet deres på skjermen. Slik gjøres det: ved hjelp av $('.www') henter vi elementene vi trenger, deretter bruker vi each(test) for å bruke funksjonen test på hvert hentet element. Den vil først bli brukt på det første avsnittet, deretter på det andre, det tredje, og så videre.

Inne i funksjonen vil this peke på det elementet som funksjonen test brukes på - først vil det være det første elementet, deretter det andre, og så videre. Med en slik konstruksjon $(this) vil vi, i stedet for en vanlig this fra JavaScript, få et jQuery-element og bruke metoden html på det, som vil hente teksten til elementet vårt. Deretter blir den bare vist på skjermen:

javascript/*
  Skriv funksjonsnavnet test uten anførselstegn og (),
  fordi vi trenger koden dens, ikke resultatet:
*/

$('.www').each(test);

function test() {
  alert($(this).html());
}

For å løse denne oppgaven kan vi også bruke anonyme funksjoner - dette gjøres oftest:

javascript$('.www').each(function() {
  alert($(this).html());
});

Vi kan også sende en callback-funksjon med parametere til metoden each.

La oss i det neste eksempelet legge til rekkefølgenummeret deres på slutten av alle li på siden. Nå vil vi sende elementets nummer og selve elementet inn i vår anonyme funksjon:

javascript$('li').each(function (index, elem) {
  $(elem).append(index);
});

Og nå bruker vi this i stedet for elem:

javascript$('li').each(function (index) {
  $(this).append(index);
});