Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

FILTRER DES ELEMENTS AVEC LE JQUERY

Filtrer des éléments

Au cours des parties précédentes, nous avons vu comment sélectionner et modifier des éléments dans le DOM, et comment nous déplacer dans le DOM pour atteindre un élément spécifique.

Dans ce chapitre, nous allons apprendre à filtrer des éléments du DOM afin de cibler très spécifiquement un élément selon sa position ou selon un certain critère.

Pour cela, nous allons étudier les méthodes jQuery suivantes :

  • Les méthodes first() et last() ;
  • La méthode eq() ;
  • La méthode filter() ;
  • La méthode not().

Les méthodes jQuery first() et last()

Les méthodes first() et last() vont respectivement retourner le premier et le dernier élément d’une collection d’éléments.

Ces deux méthodes n’ont pas besoin d'argument pour fonctionner.

Imaginons par exemple qu’on ne souhaite cibler que le premier et le dernier paragraphe d’une page HTML. Voilà comment on s’y prendrait avec first() et last() :

On cible le premier et le dernier élément d’une collection d’éléments en utilisant first() et last()

On modifie la couleur de notre premier et de notre dernier élément p avec les méthodes jQuery first() et last()

Essayer ce code

La méthode jQuery eq()

Avec les méthodes first() et last(), nous restons limités puisque nous ne pouvons cibler que le premier ou le dernier élément d’une collection.

Pour cibler n’importe quel élément dans une collection d’élément, le jQuery met à notre disposition la méthode eq().

Cette méthode va prendre en argument l’index relatif à l’élément que l’on souhaite sélectionner dans notre liste d’éléments.

Pour déterminer l’index de l’élément, rappelez vous de ceci : le premier élément de la collection va posséder l’index 0, le deuxième l’index 1, etc.

A notez que si l’on fournit un index négatif à eq(), cette méthode comptera en partant de la fin (-1 correspondant alors au dernier élément de la collection, -2 à l'avant dernier, etc.).

Reprenons notre exemple précédent pour illustrer le comportement de la méthode eq().

Utilisation de la méthode jQuery eq()

On utilise la méthode eq() pour cibler avec précision un élément dans une collection d’éléments

Essayer ce code

La méthode jQuery filter()

La méthode filter() va nous permettre de cibler certains éléments parmi une collection d’éléments en utilisant un critère.

Nous allons devoir passer ce critère en argument de la méthode.

Ce critère de filtre peut aussi bien être un sélecteur CSS qu’une fonction. On va ainsi par exemple pouvoir ne cibler que les éléments pairs ou impairs d’une liste, ou les cellules paires ou impaires d’un tableau.

Utilisation de la méthode jQuery filter()

On utilise filter() pour ne sélectionner que certains éléments parmi une collection d’éléments selon un critère

Essayer ce code

Ici, on utilise le sélecteur complexe CSS :nth-child en argument de filter(), en lui précisant de ne sélectionner que les éléments pairs (even) ou impairs (odd) .

Notez que nth-child signifie « le n-ième enfant de… ». Dans le cas de nos éléments li, ce sélecteur va donc calculer la position de chaque élément li par rapport à leur parent ul. Dans le cas de notre tableau, on ne va appliquer un style CSS qu'aux éléments tr impairs relativement à l'élément table.

La méthode jQuery not()

Finalement, la méthode jQuery not() va nous permettre de ne cibler que les éléments ne possédant pas un certain critère parmi une collection d’éléments.

En ce sens, la méthode not() est l’opposé de la méthode filter().

Reprenons notre exemple précédent, en remplaçant tout simplement filter() par not() pour s’en assurer.

Utilisation de la méthode jQuery not()

On utilise not() pour cibler les éléments ne possédant pas une critère parmi un ensemble d’éléments

Essayer ce code

Ici, on va donc appliquer une couleur bleue à tous les éléments li qui n’occupent pas une position paire. De même, on applique une couleur de fond à nos éléments tr qui ne sont pas impairs.

Chapitre précédent

Chapitre suivant