Vérifier si un élément existe à l'aide de jQuery
- Utilisez la propriété Length pour vérifier si un élément existe à l’aide de jQuery
- Créer une fonction définie par l’utilisateur pour vérifier si un élément existe à l’aide de jQuery
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 :
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook