Przegląd jQuery - metoda children()
Przykład
Znajdź wszystkie elementy potomne div o nazwie klasy "selected" i ustaw je na kolor niebieski:
$("div").children(".selected").css("color", "blue");
Definicja i zastosowanie
Metoda .children() zwraca wszystkie bezpośrednie podelementy wybranego elementu.
Gramatyka
.children(selector)
| Parametr | Opis |
|---|---|
| selector | Wartość ciągowa, zawierająca wyrażenie wyborcze dopasowanych elementów. |
Szczegółowe wyjaśnienie
Jeśli podano obiekt jQuery reprezentujący zestaw elementów DOM, metoda .children() pozwala na pobranie tych elementów z drzewa DOM i utworzenie nowego obiektu jQuery z dopasowanych elementów..find() Podobnie jak metoda .children(), ale ostatnia przechodzi tylko przez jedno poziome DOM.
Proszę zauważyć, że jak większość metod jQuery, .children() nie zwraca węzłów tekstowych; jeśli potrzebujesz uzyskać wszystkie podwęzły, w tym tekst i komentarze, użyj .contents().
Ta metoda akceptuje wyrażenie wyborcze jako opcjonalny parametr, które jest tego samego typu, co parametry przekazywane do $(). Jeśli zastosujemy wyrażenie wyborcze, testowane elementy będą dopasowywane do tego wyrażenia, tym samym filtrując te elementy.
Pomyśl o tej stronie z podstawowymi wcięciami list:
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
Jeśli zaczniemy od listy level-2, możemy znaleźć jej podelementy:
$('ul.level-2').children().css('background-color', 'red');
Wynik tego kodu to, że projekty A, B, C otrzymują czerwony tło. Ponieważ nie zastosowaliśmy wyrażenia wyborczego, zwracany obiekt jQuery zawiera wszystkie podelementy. Jeśli zastosujemy wyrażenie wyborcze, to będą obejmować tylko dopasowane projekty.
