Najnowsze tutoriale tworzenie stron internetowych
 

jQuery Ruch - Rodzeństwo

❮ Poprzedni Następny Rozdział ❯

Rodzeństwo mają tego samego rodzica.

Z jQuery można przechodzić bokiem w drzewie DOM znaleźć rodzeństwa elementu.

Ruch w bok w drzewie DOM

Istnieje wiele przydatnych metod jQuery do przechodzenia na boki w drzewie DOM:

  • siblings()
  • next()
  • nextAll()
  • nextUntil()
  • prev()
  • prevAll()
  • prevUntil()

jQuery siblings() Metoda

siblings() Metoda zwraca wszystkie elementy rodzeństwa wybranego elementu.

Poniższy przykład zwraca wszystkie elementy rodzeństwa <h2> :

Przykład

$(document).ready(function(){
    $("h2").siblings();
});
Spróbuj sam "

Można też użyć opcjonalnego parametru filtrowania poszukiwania rodzeństwa.

Poniższy przykład zwraca wszystkie elementy rodzeństwa <h2> , które są <p> elementów:

Przykład

$(document).ready(function(){
    $("h2").siblings("p");
});
Spróbuj sam "

jQuery next() Metoda

next() Metoda zwraca następny element rodzeństwo wybranego elementu.

Poniższy przykład zwraca następny rodzeństwo <h2> :

Przykład

$(document).ready(function(){
    $("h2").next();
});
Spróbuj sam "

jQuery nextAll() Metoda

nextAll() Metoda zwraca wszystkie kolejne elementy rodzeństwa wybranego elementu.

Poniższy przykład zwraca wszystkie elementy obok rodzeństwa <h2> :

Przykład

$(document).ready(function(){
    $("h2").nextAll();
});
Spróbuj sam "

jQuery nextUntil() Metoda

nextUntil() Metoda zwraca wszystkie kolejne elementy rodzeństwa pomiędzy dwoma podanymi argumentami.

Poniższy przykład zwraca wszystkie elementy rodzeństwa między A <h2> i <h6> elementu:

Przykład

$(document).ready(function(){
    $("h2").nextUntil("h6");
});
Spróbuj sam "

jQuery prev(), prevAll() & prevUntil() Metody

prev(), prevAll() i prevUntil() metody działają podobnie jak wyżej, ale z metod odwrotnej funkcjonalności: wrócą poprzednie elementy rodzeństwo (przechodzenie do tyłu wzdłuż elementów rodzeństwa w drzewie DOM, zamiast do przodu).

Sprawdź się z ćwiczeń!

Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4» Zadanie 5 » Ćwiczenia 6»

jQuery referowanie

Aby uzyskać pełny przegląd wszystkich metod jQuery postępowe, przejdź do naszej jQuery referowanie .


❮ Poprzedni Następny Rozdział ❯