Traversarea obiectelor în jQuery

De multe ori se pune problema traversarea unui array de elemente în jQuery. Pentru a face acest lucru, ai două variante:

Mixt

Poți folosi jQuery (pentru selectarea elementelor) împreună cu JS chior pentru această traversare, astfel încât, folosindu-te astfel de funcțiile native ale browserului (ceea ce înseamnă viteză).

var elemente = $('div'), totalElemente = elemente.length;
for(var i=0; i<totalElemente;i++){
 var element = elemente.eq(i);
 element.hide();
}

jQuery

Pentru aceasta folosești funcția $.each();. Treaba stă în felul următor:

var elemente = $('div');
elemente.each(function(i, element){ // `i` este index-ul; `element` este elementul curent
 element.hide();
});

Elementul curent

În ambele cazuri însă, se pune problema selectării unui child (copil sună aiurea; element ce se află în elementul curent). Și aici avem tot două variante. Ambele implică jQuery (se poate și fără):

$.find();

În ambele situații descrise mai sus, pentru a găsi toate span-urile, se poate utiliza următoarea secvență de cod:

$(element).find('span');

Sigur, poți fi un pic mai explicit, putând folosi majoritatea (dacă nu toți) selectorii valizi:

$(element).find('span[title]'); // selectează span-urile ce au atributul `title`
$(element).find('li span'); // selectează span-urile ce au ca parent li

Folosind contextul

Această metodă este „furată” direct din sursa jQuery și cred că s-a omis când s-a scris documentația. Treaba stă cam așa:

$('span', element);

Din nou, poți fi la fel de explicit ca mai sus:

$('span[title]', element); // selectează span-urile ce au atributul `title`
('li span', element); // selectează span-urile ce au ca parent li

Performanța

Diferența de performanță este destul de mică, dar există, fiind în favoarea metodei .find() (la o pagină cu 30 div-uri este o diferență de ~0.252ms între metode). Pe de altă parte, dacă folosești .find() de câteva zeci de ori, te pricopsești cu câțiva kb în plus. Sigur, vorbesc de scripturi mari, nu 10-20 linii de cod.

Resurse

1. .each()
2. .find()