Ce n’est cependant pas la seule façon d’accéder à un élément HTML. Après une sélection initiale, on va également pouvoir se déplacer dans ou “traverser” le DOM à partir de l’élément sélectionné grâce à un ensemble de méthodes jQuery.
Ces méthodes vont pouvoir être divisées en trois grands groupes :
- Celles qui nous permettent d’atteindre l’élément parent ou un ancêtre de l’élément originellement sélectionné ;
- Celles qui nous permettent d’atteindre les éléments enfants ou descendants de l’élément originellement sélectionné ;
- Celles qui nous permettent d’atteindre des éléments “frères” de l’élément originellement sélectionné, c’est-à-dire des éléments qui ont le même parent que cet élément.
Ces méthodes vont pouvoir s’avérer très utile dans le cas où il est compliqué d’accéder directement à un élément en particulier.
Accéder à l’élément parent ou aux ancêtres d’un élément en jQuery
Les méthodes parent(), parents(), parentsUntil() et closest() vont nous permettre d’accéder aux parent et ancêtres d’un élément ou d’une collection d’éléments.
La méthode parent() nous permet d’accéder à l’élément parent (c’est-à-dire à l’ancêtre direct) d’un premier élément sélectionné ou à chaque parent d’un ensemble d’éléments sélectionnés. On va pouvoir lui passer un sélecteur en argument qui permet de filtrer la sélection et de ne retourner le parent d’un élément que si celui-ci correspond au sélecteur.
See the Pen
Cours jQuery 2.2.1 by Pierre (@pierregiraud)
on CodePen.
La méthode parents() permet d’accéder à tous les ancêtres d’un élément ou d’un groupe d’éléments sélectionnés. Cette méthode va fonctionner de la même manière que parent() et va également accepter un sélecteur en argument qui va servir de filtre.
See the Pen
Cours jQuery 2.2.2 by Pierre (@pierregiraud)
on CodePen.
La méthode parentsUntil() permet également d’accéder aux ancêtres d’un élément ou d’un ensemble d’éléments jusqu’à l’ancêtre correspondant au sélecteur qu’on va passer en argument de cette méthode.
Attention ici : l’ancêtre correspondant au sélecteur ne sera pas inclus dans les résultats. Si aucun ancêtre ne correspond au sélecteur passé ou si aucun argument n’est fourni à parentsUntil(), tous les ancêtres des éléments seront sélectionnés.
On va pouvoir passer un sélecteur en second argument de parentsUntil() qui va servir de filtre (les ancêtres au milieu ne correspondant pas au filtre seront ignorés).
See the Pen
Cours jQuery 2.2.3 by Pierre (@pierregiraud)
on CodePen.
Finalement, la méthode closest() va nous permettre de sélectionner le premier ancêtre correspondant au sélecteur qu’on va lui passer en argument. Attention : cette méthode commence sa recherche à partir de l’élément ou des éléments de la sélection initiale. Cela signifie que si ces éléments correspondent au sélecteur passé en argument ils seront sélectionnés.
See the Pen
Cours jQuery 2.2.4 by Pierre (@pierregiraud)
on CodePen.
En plus de ces 4 méthodes, jQuery met également à notre disposition une méthode offsetParent() qui va nous permettre d’accéder au premier ancêtre d’un élément ou d’un ensemble d’élément qui est positionné, c’est-à-dire qui possède une propriété CSS position avec une valeur différente de static.
Cette méthode va pouvoir s’avérer très intéressante pour positionner des éléments dans une page ou pour créer des animations qui vont avoir le comportement attendu.
Accéder aux enfants ou descendants d’un élément en jQuery
Les méthodes children() et find() vont nous permettre d’accéder aux enfants et descendants d’un élément ou d’une collection d’éléments précédemment sélectionnés en jQuery.
La méthode children() va nous permettre d’accéder aux éléments enfants (descendants directs) d’un ou d’une collection d’éléments HTML. On va pouvoir lui passer un sélecteur en argument qui va servir de filtre pour nous permettre de ne sélectionner que les enfants correspondant au filtre.
La méthode find() va nous permettre de sélectionner tous les descendants (enfants, petits-enfants, etc.) d’un élément ou d’une collection d’éléments. Il va falloir passer un sélecteur en argument de cette méthode qui va servir de filtre pour nous permettre de ne sélectionner que les descendants correspondant au filtre.
Une astuce ici : pour cibler tous les descendants d’un élément en utilisant find(), il va suffire de lui passer le sélecteur universel * en argument.
See the Pen
Cours jQuery 2.2.5 by Pierre (@pierregiraud)
on CodePen.
Accéder aux éléments frères d’un élément en jQuery
jQuery met également à notre disposition plusieurs méthodes nous permettant de sélectionner les éléments frères d’un élément ou d’une collection d’éléments. Deux éléments sont “frères” (“siblings” en anglais) si ils partagent le même parent (le même ancêtre direct).
Nous allons ici étudier les méthodes siblings(), next(), nextAll(), nextUntil(), prev(), prevAll() et prevUntil().
La méthode siblings(), tout d’abord, va retourner l’ensemble de éléments frères d’un premier élément sélectionné ou d’un premier ensemble d’éléments sélectionnés. On va pouvoir passer un sélecteur qui agira comme filtre et nous permettra de ne récupérer que les éléments frères correspondant à celui-ci en argument de cette méthode.
See the Pen
Cours jQuery 2.2.6 by Pierre (@pierregiraud)
on CodePen.
La méthode next() va nous permettre de récupérer l’élément frère suivant immédiatement l’élément ou l’ensemble d’éléments précisé. On va également pouvoir lui passer un sélecteur en argument qui agira comme filtre : la méthode ne récupèrera le frère suivant que si il correspond au sélecteur.
La méthode nextAll() va elle nous permettre de récupérer tous les éléments frères suivants un élément ou une collection d’éléments. On peut lui passer un sélecteur pour filtrer les résultats en argument.
La méthode nextUntil() va récupérer tous les éléments frères suivants un élément ou une collection d’éléments jusqu’à l’élément frère correspondant au sélecteur qu’on va lui passer en argument et sans inclure cet élément dans les éléments récupérés. On va également pouvoir lui fournir un autre sélecteur en deuxième argument qui agira comme filtre.
See the Pen
Cours jQuery 2.2.7 by Pierre (@pierregiraud)
on CodePen.
Les méthodes prev(), prevAll() et prevUntil() vont fonctionner de manière analogue aux méthodes vues juste au dessus à la différence qu’elles vont nous permettre de sélectionner les éléments frères précédant un élément ou une collection d’éléments.
See the Pen
Cours jQuery 2.2.8 by Pierre (@pierregiraud)
on CodePen.
