Darbība ar each metodi jQuery

Kad mums ir elementu grupa, kas iegūta ar jQuery palīdzību, mēs varam veikt tajās izmaiņas tikai visiem elementiem vienlaicīgi.

Piemēram, ja mēs vēlamies mainīt visu atrasto rindkopu tekstu - mums neizdosies to padarīt atšķirīgu.

Šajā gadījumā mums palīdzēs īpašā metode each, kas ļauj piemērot kādu funkciju visiem jQuery kopas elementiem. Šīs funkcijas ietvaros mēs varēsim atdalīt elementus un rīkoties atšķirīgi ar katru no tiem.

Būtībā each ir cikls, ar kura palīdzību var iziet cauri visiem atrastajiem elementiem. Saite uz to elementu, pa kuru šobrīd iet cikls, atradīsies this.

Mēs varam vienkārši izmantot šo this tīrā JavaScript, kā mēs to darījām agrāk, piemēram, šādi - this.innerHTML - un izvadīt mūsu elementu iekšējo saturu. Bet labāk ietīt this jQuery dolārā šādā veidā - $(this) - šajā gadījumā mēs varēsim tam piemērot visas jQuery metodes un ķēdes.

Apskatīsim šādu HTML kodu:

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

Šajā piemērā mums ir jāiegūst visi elementi ar klasi www un jāizvada ekrānā to saturs. Kā tas tiek darīts: ar $('.www') palīdzību mēs iegūstam vajadzīgos elementus, tad ar each(test) palīdzību mēs katram iegūtajam elementam piemērojam funkciju test. Tā vispirms tiks piemērota pirmajai rindkopai, pēc tam otrajai, trešajai un tā tālāk.

Funkcijas iekšienē this norādīs uz to elementu, kuram tiek piemērota funkcija test - sākumā tas būs pirmais elements, pēc tam otrais, un tā tālāk. Ar šādas konstrukcijas $(this) palīdzību mēs parastā this vietā no JavaScript iegūsim jQuery elementu un tam piemērosim metodi html, kas iegūs mūsu elementa tekstu. Nu, un tad tas vienkārši tiks izvadīts ekrānā:

/*
	Funkcijas vārdu test rakstam bez pēdiņām un (),
	jo mums vajag tās kodu, nevis rezultātu:
*/

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

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

Šīs uzdevuma risināšanai var izmantot arī anonīmas funkcijas - tā dara visbiežāk:

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

Mēs varam arī nodot metodei each callback-funkciju ar parametriem.

Nākamajā piemērā pievienosim beigās visām li lapā to kārtas numuru. Tagad mūsu anonīmajai funkcijai mēs nodosim elementa numuru un pašu elementu:

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

Un tagad elem vietā izmantosim this:

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

Mainiet visu li saturu uz to kārtas numuru.