jQuery Traversing - Frères et sœurs
Avec jQuery, vous pouvez parcourir latéralement l'arborescence DOM pour trouver les frères et sœurs d'un élément.
Les frères et sœurs partagent le même parent.
Traverser latéralement dans l'arbre DOM
Il existe de nombreuses méthodes jQuery utiles pour parcourir latéralement l'arborescence DOM :
siblings()next()nextAll()nextUntil()prev()prevAll()prevUntil()
Méthode jQuery frères et sœurs ()
La siblings()méthode 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> :
Exemple
$(document).ready(function(){
$("h2").siblings();
});
Vous pouvez également utiliser un paramètre facultatif pour filtrer la recherche de frères et sœurs.
L'exemple suivant renvoie tous les éléments frères de <h2>qui sont <p>
des éléments :
Exemple
$(document).ready(function(){
$("h2").siblings("p");
});
Méthode jQuery next()
La next()méthode renvoie l'élément frère suivant de l'élément sélectionné.
L'exemple suivant renvoie le frère suivant de<h2> :
Exemple
$(document).ready(function(){
$("h2").next();
});
Méthode jQuery nextAll()
La nextAll()méthode renvoie tous les éléments frères suivants de l'élément sélectionné.
L'exemple suivant renvoie tous les éléments frères suivants de
<h2> :
Exemple
$(document).ready(function(){
$("h2").nextAll();
});
Méthode jQuery nextUntil()
La nextUntil()méthode renvoie tous les éléments frères suivants entre deux arguments donnés.
L'exemple suivant renvoie tous les éléments frères entre a <h2>et a <h6>element :
Exemple
$(document).ready(function(){
$("h2").nextUntil("h6");
});
Méthodes jQuery prev(), prevAll() & prevUntil()
Les méthodes prev(), prevAll()et prevUntil()fonctionnent exactement comme les méthodes ci-dessus mais avec une fonctionnalité inverse : elles renvoient les éléments frères précédents (traverse vers l'arrière le long des éléments frères dans l'arborescence DOM, au lieu de vers l'avant).
Exercices jQuery
jQuery Traversing Reference
Pour un aperçu complet de toutes les méthodes jQuery Traversing, veuillez consulter notre jQuery Traversing Reference .