Arbejde med each-metoden i jQuery

Når vi har en gruppe elementer, der er hentet med jQuery, kan vi kun foretage ændringer i dem for alle elementer på samme tid.

For eksempel, hvis vi ønsker at ændre teksten i alle de fundne afsnit - vil det ikke være muligt at gøre den forskellig.

I dette tilfælde hjælper den specielle metode each, som gør det muligt at anvende en funktion på alle elementer i et jQuery-sæt. Inde i denne funktion vil vi være i stand til at skelne mellem elementerne og behandle dem forskelligt.

I bund og grund er each en løkke, som kan bruges til at gennemgå alle de fundne elementer. En reference til det element, som løkken i øjeblikket itererer over, vil være tilgængelig i this.

Vi kan simpelthen bruge denne this i ren JavaScript, som vi gjorde tidligere, for eksempel sådan her - this.innerHTML - og udskrive elementernes indre indhold. Men det er bedre at indkapsle this i jQuery-dollar på denne måde - $(this) - på denne måde kan vi anvende alle jQuery-metoder og kæder på det.

Lad os se på følgende HTML-kode:

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

I dette eksempel skal vi hente alle elementer med klassen www og udskrive deres indhold på skærmen. Sådan gøres det: med $('.www') henter vi de ønskede elementer, derefter anvender vi funktionen test på hvert element ved hjælp af each(test). Den vil først blive anvendt på det første afsnit, derefter på det andet, på det tredje og så videre.

Inde i funktionen vil this pege på det element, som funktionen test anvendes på - først vil det være det første element, derefter det andet, og så videre. Ved hjælp af en sådan konstruktion $(this) vil vi, i stedet for en almindelig this fra JavaScript, få et jQuery-element og anvende metoden html på det, som vil hente tekstindholdet af vores element. Derefter bliver det simpelthen vist på skærmen:

/*
	Funktionens navn test skrives uden anførselstegn og (),
	da vi har brug for dens kode, og ikke resultatet:
*/

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

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

Til at løse denne opgave kan anonyme funktioner også bruges - det gøres mest almindeligt:

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

Vi kan også give each-metoden en callback-funktion med parametre.

Lad os i det næste eksempel tilføje deres rækkenummer til slutningen af alle li på siden. Nu vil vi sende elementets nummer og selve elementet ind i vores anonyme funktion:

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

Og nu bruger vi this i stedet for elem:

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

Skift indholdet af alle li til deres rækkenummer.