jQuery Traversing - Sourozenci


Pomocí jQuery můžete ve stromu DOM procházet bokem a najít sourozence prvku.

Sourozenci sdílejí stejného rodiče. 


Přecházení do strany ve stromu DOM

Existuje mnoho užitečných metod jQuery pro procházení do strany ve stromu DOM:

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

Metoda jQuery siblings().

Metoda siblings()vrací všechny sourozenecké prvky vybraného prvku.

Následující příklad vrátí všechny sourozenecké prvky <h2>:

Příklad

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

Můžete také použít volitelný parametr k filtrování vyhledávání sourozenců.

Následující příklad vrátí všechny sourozenecké prvky, <h2>které jsou <p> prvky:

Příklad

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


Metoda jQuery next().

Metoda next()vrátí další sourozenecký prvek vybraného prvku.

Následující příklad vrátí dalšího sourozence <h2>:

Příklad

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

Metoda jQuery nextAll().

Metoda nextAll()vrátí všechny další sourozenecké prvky vybraného prvku.

Následující příklad vrátí všechny další sourozenecké prvky <h2>:

Příklad

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

Metoda jQuery nextUntil().

Metoda nextUntil()vrací všechny další sourozenecké prvky mezi dvěma danými argumenty.

Následující příklad vrátí všechny sourozenecké prvky mezi <h2>a a <h6>prvkem:

Příklad

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

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

Metody prev(), prevAll()a prevUntil()fungují stejně jako výše uvedené metody, ale s reverzní funkčností: vracejí předchozí sourozenecké prvky (procházejí zpět podél sourozeneckých prvků ve stromu DOM místo vpřed).


Cvičení jQuery

Otestujte se pomocí cvičení

Cvičení:

Použijte metodu jQuery k získání všech sourozeneckých prvků prvku <h2>.

$("h2").();


jQuery Traversing Reference

Úplný přehled všech metod jQuery Traversing naleznete v naší jQuery Traversing Reference .