Méthode nextAll() de jQuery pour naviguer

Guide de navigation jQuery

Exemple

Trouver toutes les classes après le premier div et leur ajouter le nom de classe :

$("div:first").nextAll().addClass("after");

Essayez-le vous-même

Définition et utilisation

nextAll() obtient tous les éléments frères suivants de chaque élément de la collection correspondante, le filtrage par sélecteur est optionnel.

Syntaxe

.nextAll(selector)
Paramètre Description
selector Valeur de chaîne, contenant l'expression de sélecteur utilisée pour correspondre aux éléments.

Explication détaillée

Si un objet jQuery représentant un ensemble d'éléments DOM est donné, la méthode .nextAll() nous permet de chercher les éléments frères suivants dans l'arbre DOM, et de construire un nouveau jQuery object en utilisant les éléments correspondants.

Cette méthode accepte une expression de sélecteur optionnelle, du même type que celle que j'ai passée à la fonction $(). Si un sélecteur est appliqué, il les filtrera en vérifiant si les éléments correspondent.

Pensez à cette page avec une liste simple :

<ul>
   <li>item de liste 1</li>
   <li>item de liste 2</li>
   <li class="third-item">item de liste 3</li>
   <li>item de liste 4</li>
   <li>item de liste 5</li>
</ul>

Si nous commençons par le projet trois, nous pouvons trouver les éléments qui suivent :

$('li.third-item').nextAll().css('background-color', 'red');

Essayez-le vous-même

Le résultat de cette invocation est que les projets 4 et 5 ont été mis en arrière-plan rouge. Comme nous n'avons pas appliqué d'expression de sélecteur, l'élément suivant est explicitement inclus en tant que partie de l'objet. Si nous avions déjà appliqué un sélecteur, nous vérifierions s'il correspond avant de l'inclure.

Guide de navigation jQuery