jQuery Traversal - Frères et sœurs

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()

<🎜 Le La méthode >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).


Formation continue
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .siblings * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("h2").siblings().css({"color":"red","border":"2px solid yellow"}); }); </script> </head> <body class="siblings"> <div>div (父元素) <p>p</p> <span>span</span> <h2>h2</h2> <h3>h3</h3> <p>p</p> </div> </body> </html>
soumettreRéinitialiser le code
  • Recommandations de cours
  • Téléchargement du didacticiel