jQuery Traversal - Frères et s?urs

Les frères et s?urs ont le même élément parent.

Avec jQuery, vous pouvez parcourir les frères et s?urs d'un élément dans l'arborescence DOM.

Parcours horizontal dans l'arborescence DOM

Il existe de nombreuses méthodes utiles qui nous permettent de parcourir l'arborescence DOM horizontalement?:

siblings()

next( )

nextAll()

nextUntil()

prev()

prevAll()

prevUntil()

Méthode jQuery siblings()

La méthode siblings() renvoie tous les éléments frères de l'élément sélectionné.

L'exemple suivant renvoie tous les éléments frères de <h2>?:

Instance

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

Vous pouvez également utiliser des arguments facultatifs pour filtrer la recherche d'éléments frères.

L'exemple suivant renvoie tous les éléments <p> qui sont frères et s?urs de <h2>?:

Instance

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

méthode jQuery next()

next() renvoie l’élément frère suivant de l’élément sélectionné.

Cette méthode ne renvoie qu'un seul élément.

L'exemple suivant renvoie l'élément frère suivant de <h2>?:

Instance

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

méthode jQuery nextAll()

la méthode nextAll() renvoie Tous les frères et s?urs suivants de l'élément sélectionné.

L'exemple suivant renvoie tous les éléments frères suivants de <h2>?:

Instance

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

méthode jQuery nextUntil()

méthode nextUntil() renvoie tous les éléments frères suivants entre les deux arguments donnés.

L'exemple suivant renvoie tous les éléments frères entre les éléments <h2> et <h6>?:

Instance

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

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

Les méthodes prev(), prevAll() et prevUntil() fonctionnent de la même manière que les méthodes ci-dessus, mais dans le sens opposé : elles renvoient l'élément frère précédent (dans le DOM L'arbre est parcouru en arrière le long des éléments frères, pas vers l'avant).