jQuery traversal - siblings

Bracia mają tego samego rodzica.

Dzięki jQuery, możesz przechodzić poziomo po braciach elementów w drzewie DOM.

Poziome przechodzenie po drzewie DOM

Istnieje wiele użytecznych metod, które pozwalają nam przechodzić poziomo po drzewie DOM:

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

Metoda jQuery siblings()

Metoda siblings() zwraca wszystkich braci wybranego elementu.

Poniższy przykład zwraca wszystkich braci elementu <h2>:

Przykład

$(document).ready(function(){
  $("h2").siblings();
});

Spróbuj sam

Możesz również użyć opcjonalnych parametrów, aby filtrować wyszukiwanie braci.

Poniższy przykład zwraca wszystkie elementy <p> będące braćmi elementu <h2>:

Przykład

$(document).ready(function(){
  $("h2").siblings("p");
});

Spróbuj sam

Metoda jQuery next()

Metoda next() zwraca następnego brata wybranego elementu.

Ta metoda zwraca tylko jeden element.

Poniższy przykład zwraca następnego brata elementu <h2>:

Przykład

$(document).ready(function(){
  $("h2").next();
});

Spróbuj sam

Metoda jQuery nextAll()

Metoda nextAll() zwraca wszystkie następne braci wybranego elementu.

Poniższy przykład zwraca wszystkie następne braci elementu <h2>:

Przykład

$(document).ready(function(){
  $("h2").nextAll();
});

Spróbuj sam

Metoda jQuery nextUntil()

Metoda nextUntil() zwraca wszystkie następne braci między dwoma podanymi parametrami.

Poniższy przykład zwraca wszystkie braci między elementami <h2> a <h6>:

Przykład

$(document).ready(function(){
  $("h2").nextUntil("h6");
});

Spróbuj sam

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

prev(), prevAll() oraz prevUntil() działają w ten sam sposób co powyższe metody, różnią się tylko kierunkiem: zwracają poprzednich braci (w drzewie DOM przechodzą wzdłuż braci do tyłu, zamiast do przodu).

jQuery podręcznik przechodzenia

Aby dowiedzieć się o wszystkich metodach przechodzenia jQuery, odwiedź naszą jQuery podręcznik przechodzenia。