Darbo su each metodu jQuery metodika

Kai mes turime elementų grupę, gautą naudojant jQuery, mes galime atlikti pakeitimus tik visiems elementams vienu metu.

Pavyzdžiui, jei norime pakeisti visų rastų pastraipų tekstą - mums nepavyks padaryti jo skirtingo.

Šiuo atveju mums padės specialus metodas each, kuris leidžia pritaikyti kokią nors funkciją visiems jQuery rinkinio elementams. Tuo pačiu metu šios funkcijos viduje mes galėsime atskirti elementus ir elgtis skirtingai su kiekvienu iš jų.

Iš esmės each yra ciklas, kurio pagalba galima pereiti per visus rastus elementus. Nuoroda į tą elementą, per kurį dabar eina ciklas, bus this.

Mes galime tiesiog pasinaudoti šiuo this gryname JavaScript, kaip mes tai darėme anksčiau, pavyzdžiui, taip - this.innerHTML - ir išvesti vidinį mūsų elementų turinį. Bet geriau apvynioti this į jQuery dolerį taip - $(this) - tokiu atveju galėsime jai pritaikyti visus jQuery metodus ir grandines.

Pažiūrėkime į šį HTML kodą:

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

Šiame pavyzdyje mes turime gauti visus elementus su klase www ir parodyti ekrane jų turinį. Kaip tai daroma: naudojant $('.www') mes gauname mums reikalingus elementus, tada naudojant each(test) mes kiekvienam gautam elementui pritaikome funkciją test. Ji pirmiausia bus pritaikyta pirmajai pastraipai, po to antrajai, trečiajai ir taip toliau.

Funkcijos viduje this rodys į tą elementą, kuriam taikoma funkcija test - iš pradžių tai bus pirmasis elementas, po to antrasis, na ir taip toliau. Naudojant tokią konstrukciją $(this) mes vietoje įprasto this iš JavaScript gausime jQuery elementą ir pritaikysime jam metodą html, kuris gaus mūsų elemento tekstą. Na, o toliau jis tiesiog bus parodytas ekrane:

/*
	Funkcijos vardą test rašome be kabučių ir (),
	nes mums reikia jos kodo, o ne rezultato:
*/

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

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

Šiai užduočiai spręsti galima taikyti ir anonimines funkcijas - taip daroma dažniausiai:

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

Taip pat mes galime perduoti metodu each callback funkciją su parametrais.

Kitame pavyzdyje pridėkime prie galo visiems li puslapyje jų eilės numerį. Dabar į mūsų anoniminę funkciją mes perduosime elemento numerį ir patį elementą:

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

O dabar vietoj elem panaudokime this:

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

Pakeiskite visų li turinį jų eilės numeriu.