Obținem acces jQuery la element prin index
Cum să obțineți accesul jQuery la un element după index
Deci, deja am dat seama cum să obținem o colecție de elemente folosind funcția $ () și mecanismul de selecție.
Majoritatea metodelor din biblioteca jQuery vă permit să modificați o proprietate a tuturor elementelor dintr-o colecție simultan. De exemplu, vom deduce în toate etichetele <р> textul "Bună ziua!"
$ ("p") .text ("Bună ziua!");
Acest lucru, desigur, este convenabil. Dar, uneori, trebuie să accesați un anumit element al colecției. Înainte de a vă referi la un anumit element, trebuie să utilizați proprietatea lungime pentru a găsi numărul de elemente din colecție,
În plus, puteți utiliza metoda size ().
Acum, când știm numărul de elemente, putem începe să cercetăm toate elementele colecției.
Puteți accesa elementul prin specificarea indexului său în paranteze pătrate. Numerotarea începe de la zero. De exemplu, vom afișa textul "Bună ziua!" numai în a doua etichetă p.
var elems = $ ("p");
dacă (elems.size ()> = 2) elems [1] .innerHTML = "Bună ziua!";
>
alt avertisment ("Niciun element pentru ieșire!");
>
Rețineți faptul că accesul la indexuri returnează o referință la elementul DOM. Prin urmare, puteți modifica conținutul utilizând proprietatea innerHTML a obiectului document. Puteți aplica metoda jQuery text () numai după găsirea elementului.
În loc de paranteze pătrate, puteți utiliza metoda get (). Metoda are următorul format.
([<Индекс элемента>])
Dacă indicele element nu este specificat, atunci o matrice de elemente DOM este returnată,
var elems = $ ("p") get ();
alertă ("Numărul elementelor DOM" + elems.length);
Specificarea unui parametru vă permite să accesați un anumit element. Numerotarea elementelor începe cu 0. De exemplu, în toate etichetele p, derivăm indicele paragrafului curent.
Toate metodele considerate permit accesul la un anumit element DOM. Dacă doriți să accesați elementul colecției jQuery, trebuie să utilizați metoda eq (). Numerotarea elementelor începe de la 0. Să refacem exemplul nostru precedent și să folosim metoda jQuery html () în loc de proprietatea innerHTML a obiectului documentului,
Metoda slice () vă permite să obțineți o felie a colecției. Returnează o nouă colecție de articole. Are următorul format.
slice (<Начальная позиция>[ <Конечная позиция>])
Rețineți că numerotarea pozițiilor începe la 0, iar poziția finală nu se încadrează în limitele valorilor returnate. Selectați primul link din colecție.
$ ("a") .slice (0,1) .css ("culoare", "roșu");
Și acum selectați numai link-urile a doua și a treia.
Dacă nu este specificat al doilea parametru, elementele de la poziția inițială până la sfârșitul colecției vor fi returnate. Selectați toate legăturile începând cu al treilea.
$ ("a") .slice (2) .css ("culoare", "roșu");
Dacă specificați o valoare negativă, pozițiile vor fi contorizate de la sfârșitul colecției. Să selectăm ultimele două linkuri.
$ ("a") .slice (-2) .css ("culoare", "roșu");
Numim toate link-urile din document folosind metoda slice ().
Folosind metoda index (), puteți obține indexul elementului din pagină. Dacă elementul nu este găsit, -1 este returnat. Numerotarea elementelor începe de la zero. Metoda are următorul format,
Când faceți clic pe paragraf, afișăm indexul său.
$ ("p") faceți clic pe (funcția () alert ("Index:" + $ ("p").
>);
<р>Punctul 1 <р>Punctul 2 <р>Punctul 3 <р>Punctul 4
Metoda each () vă permite să sortați toate elementele colecției fără a utiliza bucle. Are următoarea sintaxă,
fiecare (funcția Callback)
funcție <Название функции> ([<Индекс> [ <Элемент DOM>]])
Toți parametrii sunt opționali. Dacă specificați o variabilă în parametrul Index, atunci la fiecare iterație indicele curent al elementului din colecție va fi transferat la acesta. Numerotarea începe cu 0. Derivăm indicele elementului în toate etichetele div.
$ ("div") fiecare (funcția (i) this.innerHTML = "DIV cu index" + i;
>);
Elementul curent este disponibil în interiorul funcției prin intermediul acestui indicator. Rețineți că acest lucru face trimitere la elementul curent al modelului de obiect al documentului, nu la elementul colecției jQuery. Din acest motiv, nu puteți folosi metode jQuery pentru acest element. În ultimul exemplu, am folosit proprietatea innerHTML a obiectului document, mai degrabă decât metoda din biblioteca jQuery, pentru a reda textul în interiorul etichetelor div. Dacă doriți să utilizați metode din biblioteca jQuery, ar trebui mai întâi să găsiți elementul utilizând funcția $ (). De exemplu, înlocuiți proprietatea innerHTML cu metoda jQuery html ().
$ ("div") fiecare (funcția (i) $ (acest) .html ("DIV cu index" + i);
>);
$ ("div") fiecare (funcția (i, d) $ (d) .html ("DIV cu index" + i);
>);
Dacă funcția returnează false, execuția fiecărei metode () va fi oprită. Cu indicele egal cu două, întrerupem executarea metodei.
În toate aceste exemple, am folosit o funcție anonimă. Dacă doriți să apelați o funcție normală, numele său este specificat ca parametru pentru metoda each () fără paranteze.
După încărcarea structurii de document, găsim o colecție de toate etichetele a ($ ("a")). Apoi, utilizați metoda each () pentru a lista toate elementele. Ca argument, specificăm o funcție anonimă. La fiecare iterație în cadrul unei funcții anonime, este disponibil un indicator (acesta) către elementul curent al colecției. Gasim elementul curent ($ (this)) si folosim metoda attr () pentru a obtine valoarea href (attr ("href")). Pentru a afișa rezultatul, găsiți elementul cu identificatorul divl ($ ("#divl")) și utilizați metoda append () pentru a adăuga rezultatul la sfârșitul valorii existente a elementului.
Articole similare
Trimiteți-le prietenilor: