Parcourir - Filtre

Les frères ont le même parent.

Avec jQuery, vous pouvez parcourir les éléments frères dans l'arbre DOM.

Parcourir horizontalement l'arbre DOM

Il y a de nombreux méthodes utiles qui nous permettent de parcourir horizontalement l'arbre DOM :

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

Méthode siblings() de jQuery

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

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

Exemple

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

Essayez-le vous-même

Vous pouvez également utiliser un paramètre optionnel pour filtrer la recherche des éléments frères.

L'exemple suivant retourne tous les éléments <p> appartenant aux éléments frères de <h2> :

Exemple

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

Essayez-le vous-même

Méthode next() de jQuery

La méthode next() retourne l'élément frère suivant de l'élément sélectionné.

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

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

Exemple

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

Essayez-le vous-même

Méthode nextAll() de jQuery

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

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

Exemple

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

Essayez-le vous-même

Méthode nextUntil() de jQuery

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

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

Exemple

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

Essayez-le vous-même

Méthodes prev(), prevAll() & prevUntil() de jQuery

Les méthodes prev(), prevAll() et prevUntil() de jQuery fonctionnent de la même manière que les méthodes ci-dessus, mais dans le sens opposé : elles retournent les éléments frères précédents (parmi les éléments frères du DOM, en itérant vers l'arrière dans l'arbre DOM, plutôt qu'en avant).

Manuel de référence de jQuery itératif

Pour en savoir plus sur toutes les méthodes itératives jQuery, veuillez visiter notre Manuel de référence de jQuery itératif。