jQuery parent() i children() przykład funkcji przechodzenia drzewa

jQuery parent() i children() – Przykład funkcji przechodzenia drzewa

Wprowadzenie

jQuery to potężna biblioteka JavaScript, która upraszcza interakcję z elementami DOM (Document Object Model). Udostępnia ona szereg funkcji służących do nawigacji po drzewie DOM, w tym parent() i children(). Funkcje te umożliwiają poruszanie się w górę i w dół struktury dokumentu, co jest niezbędne do manipulowania elementami i uzyskiwania do nich dostępu.

Funkcja parent()

Funkcja parent() zwraca element rodzica podanego elementu. Element rodzic to element znajdujący się bezpośrednio nad bieżącym elementem w drzewie DOM. Na przykład, jeśli element #child jest potomkiem elementu #parent, $(#child).parent() zwróci element #parent.

Przykład:


<div id="parent">
<div id="child">Treść elementu child</div>
</div>

<script>
console.log($( "#child" ).parent());
// Wynik: <div id="parent">...</div>
</script>

Funkcja children()

Funkcja children() zwraca kolekcję elementów potomnych podanego elementu. Elementy potomne to elementy znajdujące się bezpośrednio pod bieżącym elementem w drzewie DOM. Na przykład, jeśli element #parent ma trzy elementy potomne (#child1, #child2 i #child3), $(#parent).children() zwróci kolekcję tych trzech elementów.

Przykład:


<div id="parent">
<div id="child1">Treść elementu child1</div>
<div id="child2">Treść elementu child2</div>
<div id="child3">Treść elementu child3</div>
</div>

<script>
console.log($( "#parent" ).children());
// Wynik: [<div id="child1">...</div>, <div id="child2">...</div>, <div id="child3">...</div>]
</script>

Stosowanie funkcji parent() i children()

Funkcje parent() i children() można wykorzystać w różnych sytuacjach, takich jak:

Nawigacja po drzewie DOM: Poruszanie się w górę i w dół struktury dokumentu w celu znajdowania elementów.
Manipulacja elementami: Zmiana elementów potomnych lub rodzicielskich w celu zmodyfikowania struktury dokumentu.
Uzyskiwanie dostępu do elementów: Uzyskiwanie dostępu do elementów, które nie są bezpośrednimi potomkami bieżącego elementu.

Przykłady zastosowania

Nawigacja po drzewie DOM:


<ul id="menu">
<li id="item1">
<a href="/link1">Link 1</a>
</li>
<li id="item2">
<a href="/link2">Link 2</a>
<ul>
<li id="item2-1">
<a href="/link2-1">Link 2.1</a>
</li>
<li id="item2-2">
<a href="/link2-2">Link 2.2</a>
</li>
</ul>
</li>
</ul>

<script>
// Uzyskaj element menu głównego
var mainMenu = $( "#menu" );

// Uzyskaj pierwszy element listy
var firstListItem = $( "#item1" );

// Uzyskaj element rodzica pierwszego elementu listy
var parentOfFirstListItem = firstListItem.parent();

// Sprawdź, czy element nadrzędny jest elementem menu głównego
if (parentOfFirstListItem.is(mainMenu)) {
console.log("Element nadrzędny pierwszego elementu listy to element menu głównego");
}

// Uzyskaj elementy podrzędne elementu menu podrzędnego
var submenuItems = $( "#item2" ).children();

// Uzyskaj ostatni element z elementów podrzędnych
var lastSubmenuItem = submenuItems.last();

// Uzyskaj adres URL ostatniego elementu podrzędnego
var urlOfLastSubmenuItem = $(lastSubmenuItem).find("a").attr("href");

console.log("Adres URL ostatniego elementu podrzędnego:", urlOfLastSubmenuItem);
</script>

Manipulacja elementami:


<div id="container">
<div id="header">Nagłówek</div>
<div id="content">Treść</div>
<div id="footer">Stopka</div>
</div>

<script>
// Dodaj klasę "nowa-nagłówek" do elementu nagłówka
$( "#header" ).addClass("nowa-nagłówek");

// Usuń element stopki
$( "#footer" ).remove();

// Wstaw nową treść do elementu zawartości
$( "#content" ).html("Nowa zawartość");
</script>

Uzyskiwanie dostępu do elementów:


<div id="container">
<div class="element1">Element 1</div>
<div class="element2">Element 2</div>
<div class="element3">Element 3</div>
</div>

<script>
// Uzyskaj element z klasą "element2"
var element2 = $( ".element2" );

// Uzyskaj element rodzica elementu z klasą "element2"
var parentOfElement2 = element2.parent();

// Uzyskaj wszystkie elementy o klasie "element"
var elementsWithClassElement = $( ".element" );

// Uzyskaj pierwszy element z elementów o klasie "element"
var firstElementWithClassElement = elementsWithClassElement.first();

console.log("Pierwszy element z klasą 'element':", firstElementWithClassElement);
</script>

Wniosek

Funkcje parent() i children() są potężnymi narzędziami do nawigacji po drzewie DOM i manipulacji elementami. Zapewniają one elastyczny sposób na dostęp i modyfikację struktury dokumentu, co czyni je niezwykle przydatnymi w aplikacjach JavaScript.

Często zadawane pytania (FAQ)

1. Czy funkcje parent() i children() działają na elementach zawartych w innych elementach?

Tak, funkcje parent() i children() mogą działać na elementach zawartych w innych elementach. Na przykład, jeśli #element1 jest zawarty w #container, $(#element1).parent() zwróci element #container.

2. Czy mogę używać funkcji parent() i children() do przechodzenia między różnymi dokumentami?

Nie, funkcje parent() i children() działają tylko w obrębie jednego dokumentu. Nie można ich używać do przechodzenia do elementów w innych dokumentach lub ramach.

3. Czy mogę używać funkcji parent() i children() do modyfikacji struktury dokumentu?

Tak, funkcje parent() i children() można wykorzystać do modyfikacji struktury dokumentu. Na przykład, można użyć parent(), aby przenieść element do nowego elementu nadrzędnego, lub children(), aby usunąć wszystkie elementy podrzędne z elementu.

4. Czy funkcje parent() i children() zwracają kopie elementów?

Nie, funkcje parent() i children() nie zwracają kopii elementów. Zwracają one referencje do istniejących elementów w drzewie DOM. Oznacza to, że zmiany wprowadzone w zwróconych elementach zostaną odzwierciedlone w oryginalnych elementach.

5. Czy funkcje parent() i children() mogą zwracać wiele elementów?

Tak, funkcja children() może zwracać wiele elementów, jeśli element ma wiele elementów podrzędnych. Funkcja parent() zawsze zwraca tylko jeden element, ponieważ element może mieć tylko jednego elementu nadrzędnego.

6. Jakie są alternatywy dla funkcji parent() i children()?

Alternatywami dla funkcji parent() i children()closest() i find(). Funkcja closest() wyszukuje najbliższego przodka elementu, który pasuje do określonego selektora, a funkcja find() wyszukuje wszystkie elementy potomne w obrębie elementu, które pasują do określonego selektora.

7. Czy funkcje parent() i children() są obsługiwane we wszystkich przeglądarkach?

Tak, funkcje parent() i children() są obsługiwane we wszystkich nowoczesnych przeglądarkach