10 Funcții de trecere cu adevărat utile în jQuery

Cu jQuery, selectarea elementelor HTML este ridicol de ușor. Dar, uneori, am putea dori să perfecționăm în continuare selecția, care poate fi un hassle atunci când structura HTML este complicată. În acest tutorial, vom explora zece moduri în care putem rafina și extinde un set de elemente înfășurate pe care dorim să le acționăm.

HTML-ul

Mai întâi, să aruncăm o privire la pagina web simplă prezentată în figura de mai jos. Vom selecta elemente în el pe parcursul acestui tutorial.

1. div.container este elementul de înfășurare.
2. div.photo, div.title și div.rating sunt copii imediați div.container.
3. Fiecare div.star este un copil de div.rating.
4. Când un div.star are clasa "on", este o stea plină.

De ce trec?

Dar de ce trebuie să îmbunătățim în continuare un set de elemente? Sintaxa de selecție a jQuery nu este suficient de puternică?

Să vedem un exemplu. În pagina web menționată mai sus, când se face clic pe o stea, este posibil să adăugăm clasa "on" chiar la această stea și la fiecare stea din stânga acesteia. Și s-ar putea să dorim să schimbăm culoarea de fond a diviziei părinte a stelelor. Așa că avem următorul cod.

 $ (this) .addClass ('on'); // Cum se selectează divina mamă a 'this'? // Cum se selectează stelele din stânga 'acest'? );

În linia 2, selectăm chiar steaua care primește clic pe "acest“. Dar cum selecem diviziunea părintească a stelelor? Da, este div.rating. Dar poate exista și alte duzini div.ratings într-o pagină, nu? Deci, care este cea pe care o dorim? Și cum selectăm toate stelele din stânga "acest'?

Din fericire, jQuery ne permite să obținem seturi noi înfășurate dintr-un set existent, bazat pe relațiile ierarhice. Și aceasta este în parte ceea ce fac funcțiile de traversare.

1. copii

Această funcție devine copiii imediați ai unui set de elemente.

Acest lucru poate fi foarte util într-o varietate de situații. Uită-te la figura de mai jos:

• Containerul stelelor este selectat inițial.
• O expresie selector este transmisă copiilor () pentru a restrânge rezultatul doar la stelele întregi.
• Dacă copiii () nu primesc parametri, toți copiii imediați vor fi returnați.
• Nu vor fi returnate nepoții. scuze.

2. filtrați

Această funcție filtrează elemente din setul înfășurat utilizând o expresie de selecție trecuta. Orice elemente care nu se potrivesc cu expresia vor fi eliminate din selecție.

Exemplul următor ar trebui să fie destul de simplu. Toate stelele sunt filtrate dintr-o colecție de toate cele cinci stele.

3. nu

Spre deosebire de filtrul (), nu () elimină elementele de potrivire din setul înfășurat.

Vedeți exemplul de mai jos. Chiar și stelele sunt scoase din selecție, lăsând doar cele ciudate.

Înștiințare! Selectorii "Chiar" și "ciudat" sunt indexați zero. Ei numără indicele de la 0, NU 1.

4. adăugați

Ce se întâmplă dacă vrem să adăugăm câteva elemente setului înfășurat? Funcția add () face acest lucru.

Din nou, foarte simplu. Caseta foto este adăugată la selecție.

5. felie

Uneori am putea dori să obținem un subset al setului înfășurat, pe baza poziției elementelor din set. Și felia () este calea de parcurs.

• Primul parametru este poziția bazată pe zero a primului element care trebuie inclusă în felia returnată.
• Al doilea parametru este indicele bazat pe zero al primului element care nu trebuie inclus în felia returnată. Dacă este omisă, felia se extinde până la capătul setului.
• Asa de felie (0, 2) selectează primele două stele.

6. părinte

Funcția parent () selectează părintele direct al unui set de elemente.

După cum se arată în figura de mai jos, se selectează părintele direct al primei stele. Foarte la îndemână, nu? Trebuie remarcat faptul că numai părintele direct va fi returnat, motiv pentru care este singular. Nu vor fi selectați bunic sau strămoși.

7. părinți

Aceasta este plural! Funcția părinți () selectează toți strămoșii unui set de elemente. Vreau să spun TOȚI strămoși de la părintele direct până la "corp' și 'html“. Deci, este mai bine să treci o expresie selector pentru a restrânge rezultatul.

Prin trecerea ".recipient"către părinți (), div.container, care este de fapt bunicul primei stele, este selectat.

8. frații

Această funcție selectează toți frații (frați și surori) dintr-un set de elemente. Se poate transmite o expresie pentru a filtra rezultatul.

Uita-te la exemplu:

• Cine sunt frații din prima stea? Celelalte patru stele, bine?
• Frații "ciudați" sunt selectați așa cum se arată. Din nou, indicele este bazat pe zero. Uită-te la numerele roșii de sub stele.

9. prev & prevAll

Funcția prev () selectează fratele anterior (un) și prevAll () selectează toți frații anteriori ai unui set de elemente.

Acest lucru este foarte util dacă construiți un widget de evaluare a stelelor. Frații precedenți ai celei de-a treia stele sunt selectați.

10. următorul & următorulAll

Aceste funcții funcționează la fel ca prev și prevAll, cu excepția faptului că selectează frații NEXT.

Concluzie

În sfârșit, să vedem cum aceste funcții rezolvă o durere de cap din lumea reală pentru noi.

 $ (this) .addClass ('on'); // Cum se selectează divina mamă a 'this'? $ (this) .parent () addClass () ('on'); $ (this) .nextAll () removeClass ('on'); ););

Aceasta este chiar problema pe care am menționat-o la începutul acestui tutorial, nu? Mai multe funcții de traversare sunt utilizate în aceste linii de cod.

• În linia 5, uita-te la utilizarea lui parent (). Ușor, hai?
• În liniile 8 și 9, prevAll () și nextAll () selectează stelele complete și stelele goale.

Acum, avem o idee despre cât de ușor pot fi funcțiile de traversare. Ele pot fi chiar mai puternice atunci când sunt utilizate împreună. Ieșirea unei funcții poate fi o intrare a unei alte funcții - adică, ele pot fi aliniate.

Vă mulțumim pentru lectură! Sperăm că acest tutorial vă face viața un pic mai ușoară atunci când selectați elemente HTML cu jQuery. Orice gânduri? Ce funcții de traversare am scăpat?

• Urmăriți-ne pe Twitter sau abonați-vă la RSS Nettuts + pentru mai multe tutori și articole de coaching zilnic.