jQuery Traversing - Filtrage


Les méthodes first(), last(), eq(), filter() et not()

Les méthodes de filtrage les plus élémentaires sont first(), last()et eq(), qui vous permettent de sélectionner un élément spécifique en fonction de sa position dans un groupe d'éléments.

D'autres méthodes de filtrage, comme filter()et not()vous permettent de sélectionner des éléments qui correspondent ou non à certains critères.


Méthode jQuery first()

La first()méthode renvoie le premier élément des éléments spécifiés.

L'exemple suivant sélectionne le premier <div> élément :

Exemple

$(document).ready(function(){
  $("div").first();
});

Méthode jQuery last()

La last()méthode renvoie le dernier élément des éléments spécifiés.

L'exemple suivant sélectionne le dernier <div> élément :

Exemple

$(document).ready(function(){
  $("div").last();
});


Méthode jQuery eq()

La eq()méthode renvoie un élément avec un numéro d'index spécifique des éléments sélectionnés.

Les numéros d'index commencent à 0, donc le premier élément aura le numéro d'index 0 et non 1. L'exemple suivant sélectionne le deuxième <p>élément (numéro d'index 1) :

Exemple

$(document).ready(function(){
  $("p").eq(1);
});

Méthode jQuery filter()

La filter()méthode vous permet de spécifier un critère. Les éléments qui ne correspondent pas aux critères sont supprimés de la sélection et ceux qui correspondent sont renvoyés.

L'exemple suivant renvoie tous les <p>éléments avec le nom de classe "intro":

Exemple

$(document).ready(function(){
  $("p").filter(".intro");
});

Méthode jQuery not()

La not()méthode renvoie tous les éléments qui ne correspondent pas aux critères.

Conseil : La not()méthode est l'inverse de filter().

L'exemple suivant renvoie tous les <p>éléments qui n'ont pas le nom de classe "intro":

Exemple

$(document).ready(function(){
  $("p").not(".intro");
});

Exercices jQuery

Testez-vous avec des exercices

Exercer:

Utilisez une méthode jQuery pour obtenir le premier élément <div> du document.

$("div").();


jQuery Traversing Reference

Pour un aperçu complet de toutes les méthodes jQuery Traversing, veuillez consulter notre jQuery Traversing Reference .