Att arbeta med metoden each i jQuery

När vi har en grupp element som erhållits med hjälp av jQuery, kan vi endast göra förändringar i dem för alla element samtidigt.

Till exempel, om vi vill ändra texten i alla hittade stycken - kommer vi inte att kunna göra den olik.

I det här fallet hjälper den speciella metoden each, som tillåter oss att applicera en funktion på alla element i ett jQuery-urval. Inuti denna funktion kommer vi att kunna separera elementen och agera olika med var och en av dem.

I grund och botten är each en loop, med vars hjälp man kan iterera genom alla hittade element. En referens till det element som loopen för närvarande behandlar finns i this.

Vi kan helt enkelt använda denna this i ren JavaScript, som vi gjorde tidigare, till exempel så här - this.innerHTML - och skriva ut elementens inre innehåll. Men det är bättre att slå in this i jQuery-dollar så här - $(this) - i så fall kan vi applicera alla jQuery-metoder och kedjor på den.

Låt oss titta på följande HTML-kod:

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

I det här exemplet ska vi få alla element med klassen www och skriva ut deras innehåll på skärmen. Så här gör man: med hjälp av $('.www') får vi de element vi behöver, sedan applicerar vi med hjälp av each(test) funktionen test på varje erhållet element. Den kommer först att appliceras på det första stycket, sedan på det andra, på det tredje och så vidare.

Inuti funktionen kommer this att peka på det element som funktionen test appliceras på - först blir det det första elementet, sedan det andra, och så vidare. Med en sådan konstruktion som $(this) kommer vi, istället för en vanlig this från JavaScript, att få ett jQuery-element och applicera metoden html på det, som kommer att hämta texten i vårt element. Sedan kommer den helt enkelt att skrivas ut på skärmen:

/*
	Funktionens namn test skrivs utan citationstecken och (),
	eftersom vi behöver dess kod, inte resultatet:
*/

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

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

För att lösa denna uppgift kan man även använda anonyma funktioner - så gör man oftast:

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

Vi kan också skicka en callback-funktion med parametrar till metoden each.

Låt oss i nästa exempel lägga till deras ordningsnummer i slutet på alla li på sidan. Nu kommer vi att skicka elementets nummer och själva elementet till vår anonyma funktion:

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

Och nu använder vi this istället för elem:

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

Ändra innehållet i alla li till deras ordningsnummer.