Méthode next() de jQuery parcourir

Guide de parcour jQuery

Exemple

Trouver l'élément frère suivant de chaque paragraphe, ne sélectionner que les paragraphes avec la classe "selected" :

$("p").next(".selected").css("background", "yellow");

Essayez-le vous-même

Définition et utilisation

next() obtient l'élément frère suivant de chaque élément de la collection correspondante. Si un sélecteur est fourni, il retourne l'élément frère suivant correspondant à ce sélecteur.

Syntaxe

.next(selector)
Paramètre Description
selector Valeur de chaîne, contenant l'expression 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 .next() nous permet de chercher l'élément frère suivant de l'élément suivant dans l'arbre DOM, et de construire un nouvel objet jQuery avec l'élément correspondant.

Cette méthode accepte une expression sélecteur optionnelle, du même type que celle que j'ai passée à la fonction $(). Si l'élément frère suivant correspond à ce sélecteur, il restera dans le nouvel objet jQuery construit ; sinon, il sera exclu.

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 l'élément du projet trois, nous pouvons trouver l'élément suivant qui apparaît après lui :

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

Essayez-le vous-même

Le résultat de cette appel est que le projet 4 a été mis en arrière-plan rouge. Comme nous n'avons pas appliqué l'expression 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 parcour jQuery