33 Voix

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

Conseil de Stefan Trost | 30/01/2023 à 19:07

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.

RépondrePositifNégatif
00 Voix

Si vous souhaitez l'avoir encore plus simple, omettez simplement le "> 0" et vous pouvez écrire ce qui suit:

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

Cela fonctionne également de cette manière, car la condition renvoie "false" à une longueur de 0 et "true" à une longueur supérieure 0.
02/02/2023 à 23:15

RépondrePositif Négatif
Répondre

Sur l’Auteur

AvatarVous pouvez trouver des logiciels de Stefan Trost sur fr.sttmedia.com. Avez-vous besoin d'un logiciel personnalisé selon vos propres besoins? Écrivez-nous: fr.sttmedia.com/contact
Voir Profil

 

Sujets Connexes

jQuery: Remplacer élément

Question | 1 Réponse

Avis Important

Veuillez noter: Les contributions publiées sur askingbox.com sont des contributions d’utilisateurs et ne doivent pas remplacer les conseils d’un professionnel. Ils ne sont pas vérifiés par des indépendants et ne reflètent pas nécessairement l’opinion de askingbox.com. Apprendre encore plus.

Participer

Posez votre propre question ou écrivez votre propre article sur askingbox.com. Voici comment.