Parcours jQuery - Frères (siblings)

Avec jQuery, nous pouvons facilement parcourir horizontalement dans l'arbre DOM pour trouver les éléments frères.

Les éléments frères sont ceux qui partagent le même parent.

Dans ce chapitre, nous allons expliquer comment parcourir horizontalement dans l'arbre DOM.

Parcourir horizontalement dans l'arbre DOM

Nous avons les méthodes jQuery suivantes pour parcourir horizontalement l'arbre DOM :

• siblings()

• next()

• nextAll()

• nextUntil()

• prev()

• prevAll()

• prevUntil()

Dans ce chapitre, je vais vous montrer comment utiliser chaque méthode.

Méthode siblings() jQuery

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

L'exemple suivant retourne tous les éléments frères de chaque élément <li> ayant la classe "middle" :

$ (document).ready(function () {
　　$("li.middle").siblings().css("background"-color", "lightgreen");
});

Vous pouvez également utiliser des paramètres optionnels pour filtrer la recherche des frères.

L'exemple suivant retourne tous les éléments frères de chaque élément <li> ayant la classe "bold" :

$ (document).ready(function () {
　　$("li").siblings(".bold").css("background"-color", "lightgreen");
});

Méthode next() jQuery

jQuery next()La méthode retourne l'élément frère suivant immédiatement après l'élément sélectionné.

L'exemple suivant retourne l'élément frère suivant de chaque élément DIV :

$ (document).ready(function () {
　　$("div").next().css("background", "lightblue");
});

Méthode nextAll() jQuery

jQuery nextAll()La méthode retourne tous les éléments frères suivants de l'élément sélectionné.

L'exemple suivant retourne tous les éléments frères suivants de chaque élément DIV :

$ (document).ready(function () {
　　$("div").nextAll().css("background", "lightblue");
});

Méthode prev() jQuery

jQuery prev()La méthode retourne l'élément frère précédent, qui est immédiatement avant l'élément sélectionné.

L'exemple suivant retourne l'élément frère précédent de chaque élément DIV :

$ (document).ready(function () {
　　$("div").prev().css("background", "lightblue");
});

Méthode prevAll() jQuery

jQuery prevAll()La méthode retourne tous les éléments frères antérieurs à l'élément sélectionné.

L'exemple suivant retourne tous les éléments frères antérieurs à chaque élément DIV :

$ (document).ready(function () {
　　$("div").prevAll().css("background", "lightblue");
});

Méthodes nextUntil() et prevUntil() jQuery

jQuery nextUntil()La méthode retourne tous les éléments frères suivants entre deux paramètres donnés.

jQuery prevUntil()La méthode retourne tous les éléments frères précédents entre deux paramètres donnés.

L'exemple suivant retourne les éléments frères suivants jusqu'au <dt> suivant :-2">tous les frères suivants jusqu'au prochain <dt> :

$ (document).ready(function () {
　　$("#term-2").nextUntil("dt").css("background-"couleur", "coral");
});

L'exemple suivant retourne <dt id="term-2">tous les frères précédents, jusqu'au <dt> précédent :

$ (document).ready(function () {
　　$("#term-2").prevUntil("dt").css("background-"couleur", "coral");
});

Référence de parcour jQuery

Pour consulter les méthodes de parcour complète, veuillez visiter notreRéférence de parcour jQuery.