Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SE DEPLACER DANS LE DOM GRACE AUX METHODES JQUERY

Se déplacer dans le DOM en jQuery

Le jQuery met à notre disposition des méthodes nous permettant de nous déplacer simplement à travers les différents nœuds que forme le DOM.

On va ainsi pouvoir, à partir d’un élément ou d’une collection d’éléments, accéder aux éléments parents et enfants ou à un autre élément de même niveau.

Accéder à un élément HTML parent en jQuery

On va principalement utiliser trois méthodes en jQuery pour accéder aux éléments parents d’un ou plusieurs éléments :

  • La méthode parent() ;
  • La méthode parents() ;
  • La méthode parentsUntil().

La méthode parent() va nous permettre d’accéder au parent direct d’un certain élément ou d’une collection d’éléments.

Nous allons pouvoir utiliser cette méthode sans lui passer d'argument de cette manière :

Utilisation de la méthode jQuery() parent

On utilise la méthode parent() pour accéder au parent direct d’un certain élément

Essayer ce code

Avec parent(), il est très simple de cibler le parent direct d’un élément pour ensuite travailler avec.

Ici, on s’est contenté de changer la couleur des textes contenus dans les éléments parents directs de nos éléments span en utilisant la méthode css().

La méthode parents(), en revanche, va retourner tous les parents d’un certain élément ou d’une collection d’éléments, et ceci jusqu’à la racine du document (c’est-à-dire jusqu'à l’élément html).

Utilisation de la méthode parents() en jQuery

 On utilise parents() pour accéder à tous les parents d’un élément

Essayer ce code

Enfin, on va pouvoir utiliser la méthode jQuery parentsUntil() pour accéder à tous les parents d’un élément ou d’une collection d’éléments jusqu’à un certain élément parent qu’on devra préciser en argument de cette méthode.

Attention : l’élément parent précisé ne fera pas partie de la sélection.

Utilisation de la méthode jQuery parentsUntil()

On utilise parentsUntil() pour sélectionner les parents d’un élément HTML jusuq’à un certain parent

Essayer ce code

Ici, on accède à tous les parents de notre élément span jusqu’à l’élément possédant un attribut class='l1' qui sera exclu de la sélection.

Accéder à un élément HTML enfant en jQuery

Pour accéder à un ou plusieurs éléments enfants à partir d’un élément ou d’une collection d’éléments en jQuery, nous allons principalement utiliser deux méthodes :

  • La méthode children() ;
  • La méthode find() ;

La méthode children() va retourner tous les enfants directs d’un élément.

On va pouvoir utiliser cette méthode sans argument comme ceci :

Utilisation de la méthode jQuery children()

On utilise children() pour accéder à des éléments enfants d’un ou plusieurs éléments

Essayer ce code

Dans l’exemple ci-dessus, on cible très simplement les enfants directs de notre liste possédant un attribut class='l1' et on leur applique une couleur rouge.

On peut également préciser un sélecteur CSS en argument de children() afin de ne cibler que les éléments enfants directs correspondant au sélecteur donné.

Utilisation de children() avec un paramètre

On peut ne cibler qu’un type d’élément enfant en donnant un sélecteur en paramètre de children()

Essayer ce code

La méthode find(), à la différence de children(), va elle nous permettre d’accéder à tous les enfants, directs ou pas, d’un élément ou d’une collection d’éléments.

Cette méthode a cependant besoin qu'on lui passe un sélecteur CSS en argument afin de savoir quels éléments enfants cibler.

Si vous souhaitez accéder à tous les enfants d’un certain élément, pensez au sélecteur CSS universel * qui permet justement de cibler tous les éléments.

Utilisation de la méthode jQuery find()

On peut utiliser le sélecteur * avec la méthode jQuery find() afin de cibler tous les éléments enfants d’un élément

Essayer ce code

Accéder à un élément HTML de même niveau (élément « frère ») en jQuery

Le jQuery possède de nombreuses méthodes nous permettant de traverser le DOM pour accéder à un élément de même niveau.

Nous allons nous intéresser aux méthodes suivantes :

  • La méthode siblings() ;
  • Les méthodes next(), nextAll() et nextUntil() ;
  • Les méthodes prev(), prevAll() et prevUntil().

La méthode siblings(), tout d’abord, va simplement retourner tous les éléments frères d’un élément donné.

Utilisation de la méthode siblings() en jQuery

On utilise siblings() pour accéder aux éléments frères d’un élément

Essayer ce code

Dans l’exemple ci-dessus, vous remarquez que les éléments de notre liste ne s’affichent pas en rouge : c’est tout à fait normal, puisque c’est l’élément ul lui même qui est un frère de h1. Les éléments li qu’elle contient sont donc des « neveux » de h1.

On peut également passer un sélecteur CSS en argument de siblings(), afin de ne cibler qu’un certain élément ou type d’éléments frères.

On utilse siblings() avec un sélecteur CSS en paramètre

On peut préciser un sélecteur CSS en paramètre de siblings() afin de n’accéder qu’à un certain type d’éléments

Essayer ce code

La méthode next() va elle se contenter de retourner l’élément frère suivant l’élément précisé, tandis que la méthode nextAll() va elle retourner tous les éléments frères suivant l’élément précisé. Finalement, la méthode nextUntil() va retourner tous les éléments frères suivant l’élément précisé jusqu’à un certain élément qui sera exclu de la sélection.

Illustrons cela avec un exemple :

Utilisation des méthodes jQuery next(), nextAll() et nextUntil()

On utilise les méthodes next(), nextAll() et nextUntil() pour se déplacer à travers le DOM

Essayer ce code

Ici, on applique next() sur notre sélecteur h1 : seul l’élément suivant h1 verra son texte changé en rouge, c’est-à-dire notre premier paragraphe.

Ensuite, tous les éléments frères suivant p1 auront un texte violet, c’est-à-dire l’élément ul et les deux autres paragraphes.

Finalement on cible les éléments frères entre li1 et li4 et on leur applique une couleur orange.

Comme vous pouvez vous en douter, les méthodes prev(), prevAll() et prevUntil() vont fonctionner exactement de la même façon que next(), nextAll() et nextUntil() mais vont cette fois-ci cibler les éléments frères précédant un certain élément.

Reprenons notre exemple précédent en le modifiant légérement et en utilisant les méthodes prev(), prevAll() et prevUntil() afin de les voir fonctionner en pratique.

Utilisation des méthodes jQuery prev(), prevAll() et prevUntil()

On peut cibler certains éléments frères précedent un élément en jQuery grâce à prev(), prevAll() et prevUntil()

Essayer ce code

Pas de grande surprise ici : si vous avez compris l’exemple précédent, vous devriez comprendre celui-ci.

Chapitre précédent

Chapitre suivant