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.
Sur l’Auteur
Vous 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: Afficher et Masquer Éléments
Tutoriel | 0 Commentaires
JavaScript et jQuery: Remplacer le contenu d'un élément à l'aide de innerHTML
Tutoriel | 0 Commentaires
jQuery: Compter les Éléments, les Images, les Classes, etc.
Conseil | 0 Commentaires
jQuery: Lire et Modifier les Valeurs d'Attributs Data
Tutoriel | 0 Commentaires
jQuery: Remplacer élément
Question | 1 Réponse
JavaScript: Comment changer et lire une valeur d'input sans jQuery à l'aide de JavaScript pur
Question | 1 Réponse
JavaScript: Capturer l'Envoi d'un Formulaire
Tutoriel | 0 Commentaires
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.
Si vous souhaitez l'avoir encore plus simple, omettez simplement le "> 0" et vous pouvez écrire ce qui suit:
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