Jak znaleźć dziecko elementu HTML w jQuery

Elementy HTML obejmują dowolną część strony internetowej, na przykład nagłówki, tabele, obrazy i akapity. Gdy przeplatasz zmienne HTML jeden wewnątrz drugiego, tworzysz elementy nadrzędne i podrzędne. Górnym elementem jest ojciec, a wszystkie przeplatane elementy stają się dziećmi. W jQuery możesz uzyskać element potomny elementu za pomocą funkcji "children ()" (syn, po angielsku), ale musisz przejść przez tablicę wartości, które tworzy funkcja.

Przed próbą wykonania skryptu w jQuery sprawdź, czy kod zawiera odwołanie do biblioteki jQuery. Dodaj ten kod w "" zmiennych (nagłówku) swojej strony internetowej, jeśli nie widzisz odniesienia:

Dodaj kilka zmiennych skryptu poniżej odwołania do biblioteki jQuery i napisz funkcję, aby sprawdzić, czy strona zakończyła ładowanie. Cały skrypt powinien znajdować się pomiędzy klawiszami tej funkcji:

$ (function () {});

Wybierz element HTML, którego potrzebujesz, aby uzyskać listę elementów potomnych z niego. Na przykład, jeśli chcesz uzyskać dzieci z listy nieuporządkowanej, wybierz element "ul". Dodaj selektor za pomocą funkcji "dzieci ()", aby uzyskać dziecko:

$ ('ul.level-2'). children ();

Poprzedni przykład wybierze dowolną nieuporządkowaną listę, która ma nazwę klasy "level-2". Jednak gdy "children ()" znajdzie wiele elementów potomnych, utworzy tablicę wartości. Do przetwarzania macierzy potrzebne będą specjalne kody.

Dołącz "children ()" z "each ()" (każdy) do przechodzenia przez tablicę elementów potomnych. Ponieważ jest to struktura pętli, potrzebujesz zmiennej licznika, ale nie powinieneś jej tworzyć z wyprzedzeniem w jQuery. Przekaż "i" jako argument w każdym "każdym ()", aby otrzymać swój licznik:

$ ('ul.level-2'). children (). each (function (i) {});

Zadeklaruj zmienną, która zachowa wartość tekstową każdego elementu podrzędnego. Możesz uzyskać inne wartości elementów, ale tekst zwróci dowolny tekst znaleziony w dziecku i warto uzyskać dane. Ustaw zmienną na "$ (this)" (this), aby uzyskać bieżący element, w którym działa funkcja "each ()". Dołącz "$ (this)" z "text ()" (tekst), aby uzyskać tekst:

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

Emituj wartości na swojej stronie, wybierając element i dołącz "append ()" (annex), aby funkcja "each ()" mogła kontynuować dodawanie znalezionych wartości:

$ ("div"). append (i + ":" + childEl + "");

W tym przykładzie "childEl" jest wydawane dla serii zmiennych "". Za każdym razem, gdy jQuery powtarza kody w "each ()", wydaje numer od "i", dodaje parę średnika, wyprowadza wartość "childEl" i kończy linię zmienną skryptu.

Twój końcowy skrypt powinien wyglądać tak:

$ (function () {$ ('ul.level-2'). children (). each (function (i) {var childEl = $ (this) .html (); $ ("div"). append (i + ":" + childEl + "");});});

Rada

Dodaj "console.log (childEl);" wewnątrz każdej funkcji "each ()" w ostatnim wierszu. Użyj Firebuga w przeglądarce Firefox lub konsoli JavaScript w Google Chrome, aby sprawdzić wartości w konsoli podczas debugowania.

Zamień "tekst ()" na "html ()", aby uzyskać kod HTML elementów podrzędnych.