Práca s metódou each v jQuery

Keď máme skupinu prvkov získaných pomocou jQuery, môžeme do nich vykonať zmeny len pre všetky prvky naraz.

Napríklad, ak chceme zmeniť text všetkých nájdených odsekov - nedokážeme ho urobiť rôznym.

V tomto prípade nám pomôže špeciálna metóda each, ktorá umožňuje aplikovať nejakú funkciu pre všetky prvky súboru jQuery. Pritom vo vnútri tejto funkcie budeme môcť rozdeliť prvky a narábať inak s každým z nich.

V podstate each je cyklus, s ktorým môžete prejsť všetky nájdené prvky. Odkaz na ten prvok, po ktorom práve prechádza cyklus bude ležať v this.

Môžeme jednoducho využiť tento this v čistom JavaScripte, ako sme to robili predtým, napríklad tak - this.innerHTML - a vypísať vnútorný obsah našich prvkov. Ale lepšie je obaliť this do jQuery dolárom takýmto spôsobom - $(this) - v tomto prípade budeme môcť aplikovať naň všetky metódy a reťazce jQuery.

Pozrime sa na nasledujúci HTML kód:

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

V tomto príklade musíme získať všetky prvky s triedou www a vypísať na obrazovku ich obsah. Ako sa to robí: pomocou $('.www') získame potrebné prvky, potom pomocou each(test) aplikujeme na každý získaný prvok funkciu test. Najprv sa aplikuje na prvý odsek, potom na druhý, na tretí a tak ďalej.

Vo vnútri funkcie this bude ukazovať na ten prvok, na ktorý sa aplikuje funkcia test - najprv to bude prvý prvok, potom druhý, a tak ďalej. Pomocou takejto konštrukcie $(this) miesto obyčajného this z JavaScriptu získame jQuery prvok a aplikujeme naň metódu html, ktorá získa text nášho prvku. No, a potom sa jednoducho vypíše na obrazovku:

/*
	Názov funkcie test píšeme bez úvodzoviek a (),
	pretože potrebujeme jej kód, nie výsledok:
*/

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

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

Na riešenie tejto úlohy možno použiť aj anonymné funkcie - tak to robia najčastejšie:

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

Tiež môžeme odovzdať metóde each callback-funkciu s parametrami.

V nasledujúcom príklade pridajme na koniec všetkým li na stránke ich poradové číslo. Teraz do našej anonymnej funkcie budeme odovzdávať číslo prvku a samotný prvok:

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

A teraz namiesto elem použime this:

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

Zmeňte obsah všetkých li na ich poradové číslo.