HOWTO · jQuery
Vérifier si un élément existe à l'aide de jQuery
Ce tutoriel montre comment vérifier si un élément existe à l'aide de jQuery.
Sur cette page
Il existe deux méthodes pour vérifier si un élément existe ou non en utilisant jQuery, l’une est la propriété length, et l’autre consiste à utiliser des méthodes pour créer notre propre méthode exist(). Ce tutoriel montre comment vérifier si un élément existe ou non.
Utilisez la propriété Length pour vérifier si un élément existe à l’aide de jQuery
La propriété length de jQuery peut être utilisée pour vérifier si l’élément existe ou non ; il renvoie le nombre total d’éléments correspondants. Si length renvoie 0, l’élément n’existe pas et toute autre valeur signifie que l’élément existe.
La syntaxe de la propriété length est la suivante :
($("element").length)
La syntaxe ci-dessus renverra 0 ou tout autre nombre.
Essayons un exemple pour vérifier si un élément existe ou non en utilisant la propriété length. Voir exemple :
<!DOCTYPE html>
<html>
<head>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<title>jQuery Length</title>
<style>
body {
text-align: center;
}
h1 {
color: lightblue;
font-size: 4.5rem;
}
button {
cursor: pointer;
margin-top: 4rem;
}
</style>
</head>
<body>
<h1>Delftstack | The Best Tutorial Site</h1>
<p id="DemoPara1">This is paragraph 1</p>
<button id="DemoButton1"> Check Paragraph 1</button>
<button id="DemoButton2"> Check Paragraph 2 </button>
<button id="DemoButton3"> Check Heading 1 </button>
<script type="text/javascript">
$(document).ready(function () {
$("#DemoButton1").click(function () {
if ($("#DemoPara1").length) {
alert("Paragraph 1 exists");
}
else {
alert("Paragraph 1 does not exist");
}
});
$("#DemoButton2").click(function () {
if ($("#DemoPara2").length) {
alert("Paragraph 2 exists");
}
else {
alert("Paragraph 2 does not exist");
}
});
$("#DemoButton3").click(function () {
if ($("h1").length) {
alert("Heading 1 exists");
}
else {
alert("Heading 1 does not exist");
}
});
});
</script>
</body>
</html>
Le code ci-dessus vérifiera si les paragraphes et le titre existent ou non en appuyant sur différents boutons. Voir la sortie :
Créer une fonction définie par l’utilisateur pour vérifier si un élément existe à l’aide de jQuery
Maintenant, essayons de créer notre propre méthode pour vérifier si l’élément existe ou non dans jQuery. La syntaxe pour créer une fonction existe est :
jQuery.fn.exists = function () {
return this.length > 0;
};
Comme vous pouvez le voir, nous avons utilisé la propriété length pour créer notre propre fonction exists avec jQuery. La propriété length sert à renvoyer la longueur des éléments, pas à vérifier leur existence ; c’est pourquoi nous pouvons créer notre propre méthode une fois et l’utiliser n’importe où.
Voir exemple :
<!DOCTYPE html>
<html>
<head>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<title>jQuery Exists</title>
<style>
body {
text-align: center;
}
h1 {
color: lightblue;
font-size: 4.5rem;
}
button {
cursor: pointer;
margin-top: 4rem;
}
</style>
</head>
<body>
<h1>Delftstack | The Best Tutorial Site</h1>
<p id="DemoPara1">This is paragraph 1</p>
<button id="DemoButton1"> Check Paragraph 1</button>
<button id="DemoButton2"> Check Paragraph 2 </button>
<button id="DemoButton3"> Check Heading 1 </button>
<script type="text/javascript">
$(document).ready(function () {
jQuery.fn.exists = function () {
return this.length > 0;
};
$("#DemoButton1").click(function () {
if ($("#DemoPara1").exists()) {
alert("Paragraph 1 exists");
}
else {
alert("Paragraph 1 does not exist");
}
});
$("#DemoButton2").click(function () {
if ($("#DemoPara2").exists()) {
alert("Paragraph 2 exists");
}
else {
alert("Paragraph 2 does not exist");
}
});
$("#DemoButton3").click(function () {
if ($("h1").exists()) {
alert("Heading 1 exists");
}
else {
alert("Heading 1 does not exist");
}
});
});
</script>
</body>
</html>
Le code ci-dessus utilise une fonction définie par l’utilisateur existe pour vérifier si l’élément existe ou non. La sortie sera similaire à celle de l’exemple.
Voir la sortie :
