Rad sa metodom each u jQuery

Kada imamo grupu elemenata dobijenih pomoću jQuery, možemo unositi u njih promene samo za sve elemente istovremeno.

Na primer, ako želimo da promenimo tekst svih pronađenih pasusa - nećemo moći da ga učinimo drugačijim.

U ovom slučaju će nam pomoći specijalni metod each, koji omogućava primenu neke funkcije za sve elemente jQuery skupa. Pritom unutar ove funkcije možemo razdvojiti elemente i postupiti drugačije sa svakim od njih.

U suštini each je petlja, pomoću koje možemo proći kroz sve pronađene elemente. Veza na taj element, kroz koji trenutno prolazi petlja, biće u this.

Možemo jednostavno iskoristiti ovaj this na čistom JavaScript-u, kao što smo ranije radili, na primer, ovako - this.innerHTML - i prikazati unutrašnji sadržaj naših elemenata. Ali bolje je obmotati this u dolar jQuery na ovaj način - $(this) - u ovom slučaju ćemo moći da primenjujemo na njega sve metode i lance jQuery.

Pogledajmo sledeći HTML kod:

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

U ovom primeru treba da dobijemo sve elemente sa klasom www i prikažemo na ekranu njihov sadržaj. Kako se to radi: pomoću $('.www') dobijamo elemente koji su nam potrebni, zatim pomoću each(test) primenjujemo na svaki dobijeni element funkciju test. Ona će se prvo primeniti na prvi pasus, pa na drugi, na treći i tako dalje.

Unutar funkcije this će ukazivati na onaj element, na koji se primenjuje funkcija test - prvo će to biti prvi element, pa drugi, i tako dalje. Pomoću takve konstrukcije $(this) umesto običnog this od JavaScript-a dobićemo jQuery element i primenićemo na njega metod html, koji će dobiti tekst našeg elementa. Pa, zatim on će se jednostavno prikazati na ekranu:

javascript/*
  Ime funkcije test pišemo bez navodnika i (),
  pošto nam je potreban njen kod, a ne rezultat:
*/

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

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

Za rešavanje ovog zadatka se mogu koristiti i anonimne funkcije - to se najčešće radi:

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

Takođe možemo proslediti metodu each callback-funkciju sa parametrima.

Dodajmo u sledećem primeru na kraj svim li na stranici njihov redni broj. Sada ćemo u našu anonimnu funkciju proslediti broj elementa i sam element:

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

A sada umesto elem koristimo this:

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