Cum se găsește copilul unui element HTML în jQuery

Elementele HTML includ orice parte a unei pagini web, cum ar fi anteturi, tabele, imagini și paragrafe. Când intercalați variabilele HTML una în alta, creați elemente părinte și copil. Elementul superior este tatăl, în timp ce toate elementele intercalate devin copii. În jQuery, puteți obține copilul unui element folosind funcția "copii ()" (fiu, în limba engleză), dar trebuie să treceți prin matricea de valori care creează funcția.

Verificați dacă codul dvs. include o referință la biblioteca jQuery înainte de a încerca să efectuați scriptul în jQuery. Adăugați acest cod în variabilele (antetul) paginii dvs. web, dacă nu vedeți referința:

Adăugați o serie de variabile de script sub referința bibliotecii jQuery și scrieți o funcție pentru a verifica încărcarea paginii. Tot scriptul dvs. ar trebui să fie între tastele acestei funcții:

$ (funcția () {});

Selectați elementul HTML de care aveți nevoie pentru a obține o listă cu elementele copilului din acesta. De exemplu, dacă doriți să obțineți copii dintr-o listă neordonată, selectați elementul "ul". Adăugați selectorul cu funcția "copii ()" pentru a obține copilul:

$ ("ul.level-2") copii ();

Exemplul anterior va selecta orice listă neordonată care are un nume de clasă "level-2". Cu toate acestea, atunci când "copii ()" găsește mai multe elemente copil, va crea o serie de valori. Veți avea nevoie de coduri speciale pentru a procesa o matrice.

Adăugați "copii ()" cu "each ()" (fiecare) pentru a traversa matricea elementelor copil. Deoarece este o structură de buclă, aveți nevoie de o variabilă contra, dar nu ar trebui să o creați în avans în jQuery. Parcurgeți "i" ca argument în fiecare "fiecare ()" pentru a vă lua un contor:

$ ('ul.level-2') copii () fiecare (funcția (i) {});

Declarați o variabilă care va menține valoarea textului pentru fiecare element copil. Puteți obține alte valori ale elementelor, dar textul va returna orice text găsit în interiorul copilului și este util să obțineți date. Setați variabila la "$ (this)" (aceasta) pentru a obține elementul curent pe care funcția "each ()" funcționează. Adăugați "$ (this)" cu text () Text:

var childEl = $ (acest) .text ();

Emiteți valorile pe pagina dvs. selectând un element și adăugați "append ()" (anexă) astfel încât funcția "each ()" să poată continua să adauge valorile pe care le găsește:

$ ('div') adăugați (i + ":" + childEl + "");

În acest exemplu, "childEl" este emis pentru o serie de variabile "". De fiecare dată când jQuery repetă codurile din "each ()", emite numărul din "i", adaugă o pereche punct și virgulă, afișează valoarea "childEl" și sfârșește linia cu o variabilă de script.

Scriptul dvs. final ar trebui să arate astfel:

$ () () ($ {(ul.level-2 ') copii () fiecare (funcția (i) {var childEl = $ (this) .html + ":" + copilEl + "");});});

consiliu

Adăugați "console.log (childEl);" în interiorul fiecărei funcții "fiecare ()" în ultima linie. Utilizați Firebug în Firefox sau Consola JavaScript în Google Chrome pentru a verifica valorile dintr-o consolă la depanare.

Înlocuiți "text ()" cu "html ()" pentru a obține codul HTML al elementelor copil.