Delo z metodo each v jQuery

Ko imamo skupino elementov, pridobljenih z jQuery, lahko spreminjamo le vse elemente hkrati.

Na primer, če želimo spremeniti besedilo vseh naštetih odstavkov - ne bomo mogli narediti drugačnega.

V tem primeru nam bo pomagala posebna metoda each, ki omogoča uporabo kakšne funkcije za vse elemente niza jQuery. Pri tem znotraj te funkcije lahko ločimo elemente in ravnamo drugače z vsakim od njih.

V bistvu je each zanka, s pomočjo katere lahko iteriramo čez vse najdene elemente. Povezava do tistega elementa, prek katerega trenutno poteka zanka, bo v this.

Ta this lahko preprosto uporabimo v čistem JavaScriptu, kot smo to počeli prej, na primer takole - this.innerHTML - in izpišemo notranjo vsebino naših elementov. Vendar je bolje oviti this v dolar jQuery na ta način - $(this) - v tem primeru lahko zanj uporabimo vse metode in verige jQuery.

Oglejmo si naslednjo HTML kodo:

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

V tem primeru moramo dobiti vse elemente z razredom www in jih prikazati na zaslonu njihovo vsebino. Kako se to naredi: s pomočjo $('.www') dobimo elemente, ki jih potrebujemo, nato s pomočjo each(test) za vsakega prejetega elementa uporabimo funkcijo test. Najprej se bo uporabila za prvi odstavek, nato za drugega, za tretjega in tako naprej.

Znotraj funkcije bo this kazal na tisti element, za katerega se uporablja funkcija test - najprej bo to prvi element, nato drugi, in tako naprej. S takšno konstrukcijo $(this) namesto običajnega this iz JavaScripta dobimo element jQuery in zanj uporabimo metodo html, ki bo dobila besedilo našega elementa. No, nato se bo preprosto prikazal na zaslonu:

/*
	Ime funkcije test pišemo brez narekovajev in (),
	ker potrebujemo njeno kodo, ne rezultat:
*/

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

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

Za rešitev te težave lahko uporabimo tudi anonimne funkcije - to se počne najpogosteje:

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

Prav tako lahko metodi each posredujemo callback-funkcijo s parametri.

V naslednjem primeru dodajmo na konec vsem li na strani njihovo zaporedno številko. Zdaj v našo anonimno funkcijo bomo podali številko elementa in sam element:

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

In zdaj namesto elem uporabimo this:

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

Spremenite vsebino vseh li na njihovo zaporedno številko.