Lucrul cu metoda each în jQuery

Când avem un grup de elemente obținute cu jQuery, putem face modificări în ele doar pentru toate elementele simultan.

De exemplu, dacă vrem să schimbăm textul tuturor paragrafelor găsite - nu vom putea să îl facem diferit.

În acest caz ne va ajuta metoda specială each, care permite aplicarea unei funcții pentru toate elementele unui set jQuery. În același timp, în interiorul acestei funcții vom putea separa elementele și acționa diferit cu fiecare dintre ele.

În esență each este o buclă, cu ajutorul căreia se pot parcurge toate elementele găsite. Referința la elementul curent din buclă se va afla în this.

Putem pur și simplu să folosim acest this în JavaScript simplu, așa cum am făcut înainte, de exemplu, așa - this.innerHTML - și să afișăm conținutul intern al elementelor noastre. Dar este mai bine să îmbrăcăm this în dolar jQuery astfel - $(this) - în acest caz vom putea să îi aplicăm toate metodele și lanțurile jQuery.

Să analizăm următorul cod HTML:

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

În acest exemplu trebuie să obținem toate elementele cu clasa www și să afișăm pe ecran conținutul lor. Cum se face: cu ajutorul $('.www') obținem elementele de care avem nevoie, apoi cu ajutorul each(test) aplicăm funcția test la fiecare element obținut. Mai întâi se va aplica la primul paragraf, apoi la al doilea, la al treilea și așa mai departe.

În interiorul funcției this va indica către elementul căruia i se aplică funcția test - mai întâi va fi primul element, apoi al doilea, și așa mai departe. Cu ajutorul unei astfel de constructii $(this) în loc de un simplu this din JavaScript vom obține un element jQuery și îi vom aplica metoda html, care va obține textul elementului nostru. Apoi, acesta va fi pur și simplu afișat pe ecran:

/*
	Numele funcției test îl scriem fără ghilimele și (),
	deoarece avem nevoie de codul ei, nu de rezultat:
*/

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

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

Pentru rezolvarea acestei sarcini se pot folosi și funcții anonime - așa se face cel mai des:

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

De asemenea, putem transmite metodei each o funcție callback cu parametri.

Să în următorul exemplu să adăugăm la sfârșit tuturor li de pe pagină numărul lor de ordine. Acum în funcția noastră anonimă vom transmite numărul elementului și elementul în sine:

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

Și acum în loc de elem să folosim this:

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

Schimbați conținutul tuturor li cu numărul lor de ordine.