jQuery: Y a-t-il un Élément?

Parfois, nous voulons utiliser jQuery pour vérifier s'il existe un élément dans la page actuelle. Par exemple, afin de charger un élément uniquement s'il n'est pas déjà présent.

Pour ce faire, nous pouvons travailler avec la propriété "length" qui nous est fournie par chaque sélecteur jQuery.

L'astuce: Lors de la création d'un sélecteur, jQuery stocke tous les éléments correspondants dans un array. Si nous avons un sélecteur arbitraire, nous pouvons interroger la longueur de ce tableau via ".length". Si la longueur est de 0, nous savons qu'il n'y a pas d'éléments qui correspondent au sélecteur respectif - donc l'élément en question n'existe pas.

Éléments avec un ID spécifique

Voyons un exemple pour cela. Dans ce qui suit, nous aimerions vérifier la présence d'un élément avec un certain ID:

if ($('#a').length == 0) {
  alert('L’élément avec l’ID "a" n’existe pas.');
}

if ($('#b').length > 0) {
  alert('L’élément avec l’ID "a" existe.');
}

Le sélecteur jQuery pour IDs place un losange devant le nom de l'ID correspondant. En conséquence, avec ce code, nous vérifions s'il y a des éléments des ID "a" ou "b" sur notre page. Dans le premier exemple, nous aimerions publier un message s'il n'y a pas d'élément avec l'ID "a" (la longueur du array est 0 dans ce cas). Dans le deuxième exemple, nous inversons la requête et souhaitons afficher le message dans le cas où un élément avec l'ID "b" est présent (la longueur du array devrait être supérieur à 0 dans ce cas).

Éléments avec une Classe spécifique ou un Type d'Élément spécifique

Au-delà de la vérification des éléments individuels ayant un certain ID, nous pouvons également utiliser tout autre sélecteur jQuery que nous pouvons imaginer. Par conséquent, par exemple, nous pouvons également vérifier la présence d'éléments avec certaines classes ou un certain type en utilisant simplement le sélecteur correspondant:

if ($('.c').length > 0) {
  alert('Au moins un élément avec la classe "c" est disponible.');
}

if ($('img').length > 0) {
  alert('La page contient ' + $('img').length + ' images.');
}

if ($('h2').length == 0) {
  alert('Il n’y a pas de titres H2 sur cette page.');
}

if ($('#a.b').length > 0) {
  alert('L’élément avec l’ID "a" a attribué la classe "b".');
}

if ($('ul>li').length > 0) {
  alert('Il y a ' + $('ul>li').length + ' éléments LI sous UL.');
}

Avec ces exemples, nous vérifions s'il y a des éléments de la classe "c", des images ou des têtes H2 sur la page (dans le cas des images, nous affichons également le nombre d'images trouvées). Nous testons également s'il y a un élément avec l'ID "a" à quelle la classe "b" est attribué et combien d'éléments LI y a-t-il dans des listes UL.

Comme vous pouvez le voir: Tous les sélecteurs jQuery typiques sont possibles.