Metoda parents() jQuery do przechodzenia w górę drzewa DOM
Definicja i użycie
parents() uzyskuje przodków każdego elementu w zbiorze elementów, który pasuje do wyrażenia wyborczego, filtracja za pomocą wyrażenia wyborczego jest opcjonalna.
.parents()selector)
| Parametr | Opis |
|---|---|
| selector | Wartość ciągła, zawierająca wyrażenie selekcyjne do dopasowania elementów. |
Szczegółowe wyjaśnienie
Jeśli podamy obiekt jQuery reprezentujący zbiór elementów DOM, metoda .parents() pozwala nam przeszukać przodków tych elementów w drzewie DOM i utworzyć nowy obiekt jQuery z kolejnością elementów od najbliższego rodzica w górę. Elementy są zwracane w kolejności od najbliższego rodzica na zewnątrz. .parents() i .parent() Metoda jest podobna, ale różni się tym, że przechodzi przez jedno poziom w drzewie DOM.
Ta metoda akceptuje opcjonalne wyrażenie selekcyjne, które jest tego samego typu, co parametr przekazywany do funkcji $(). Jeśli zastosujemy ten selektor, elementy będą filtrowane poprzez sprawdzanie, czy pasują do tego selektora.
Pomyśl o tej stronie z podstawową wcięciową 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 zaczynamy od elementu A, możemy znaleźć jego przodków:
$('li.item-a').parents().css('background-color', 'red');
Wynik tego wywołania to ustawienie czerwonego tła dla elementów takich jak lista level-2, element II oraz lista level-1 (aż do <html>) wzdłuż drzewa DOM. Ponieważ nie zastosowaliśmy wyrażenia selekcyjnego, naturalnie stał się on częścią obiektu. Jeśli zastosowaliśmy wyrażenie selekcyjne, sprawdzamy, czy element pasuje do selektora przed jego zawartością. Ponieważ nie zastosowaliśmy wyrażenia selekcyjnego, wszystkie przodkowie są częścią zwracanego obiektu jQuery. Jeśli zastosowaliśmy wyrażenie selekcyjne, zawiera on tylko pasujące elementy.
