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(); } [/js] <span id="more-1387"></span> <h3>jQuery</h3> Pentru aceasta folosești funcția <code>$.each();</code>. 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
- Posted in:
- jQuery
- Tags:
- DOM,
- jQuery,
- Traversing