Praca z metodą each w jQuery

Gdy mamy grupę elementów uzyskanych za pomocą jQuery, możemy wprowadzać w nich zmiany tylko dla wszystkich elementów jednocześnie.

Na przykład, jeśli chcemy zmienić tekst wszystkich znalezionych akapitów - nie uda nam się go zrobić różnym.

W tym przypadku pomoże nam specjalna metoda each, która pozwala zastosować jakąś funkcję do wszystkich elementów zestawu jQuery. Jednocześnie wewnątrz tej funkcji będziemy mogli rozróżnić elementy i postąpić inaczej z każdym z nich.

Zasadniczo each jest pętlą, za pomocą której można przejść przez wszystkie znalezione elementy. Odnośnik do tego elementu, przez który aktualnie przechodzi pętla będzie leżał w this.

Możemy po prostu skorzystać z tego this w czystym JavaScript, jak to robiliśmy wcześniej, na przykład tak - this.innerHTML - i wypisać wewnętrzną zawartość naszych elementów. Ale lepiej opakować this w dolara jQuery w ten sposób - $(this) - w tym przypadku będziemy mogli stosować do niego wszystkie metody i łańcuchy jQuery.

Przyjrzyjmy się następującemu kodowi HTML:

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

W tym przykładzie powinniśmy otrzymać wszystkie elementy z klasą www i wypisać na ekran ich zawartość. Jak to się robi: za pomocą $('.www') otrzymujemy potrzebne nam elementy, następnie za pomocą each(test) do każdego uzyskanego elementu stosujemy funkcję test. Najpierw zostanie zastosowana do pierwszego akapitu, potem do drugiego, do trzeciego i tak dalej.

Wewnątrz funkcji this będzie wskazywać na ten element, do którego stosowana jest funkcja test - najpierw będzie to pierwszy element, potem drugi, i tak dalej. Za pomocą takiej konstrukcji $(this) zamiast zwykłego this z JavaScript otrzymamy element jQuery i zastosujemy do niego metodę html, która uzyska tekst naszego elementu. No, a dalej po prostu zostanie wypisany na ekran:

/*
	Nazwę funkcji test piszemy bez cudzysłowów i (),
	ponieważ potrzebny jest jej kod, a nie wynik:
*/

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

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

Aby rozwiązać to zadanie, można również stosować funkcje anonimowe - tak robi się najczęściej:

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

Możemy również przekazać metodzie each funkcję callback z parametrami.

W następnym przykładzie dodajmy na końcu wszystkim li na stronie ich numer porządkowy. Teraz do naszej funkcji anonimowej będziemy przekazywać numer elementu i sam element:

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

A teraz zamiast elem użyjmy this:

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

Zmień zawartość wszystkich li na ich numer porządkowy.