Mit jQuery prüfen, ob ein Element vorhanden ist
- Verwenden Sie die Length-Eigenschaft, um mit jQuery zu prüfen, ob ein Element vorhanden ist
- Erstellen Sie eine benutzerdefinierte Funktion, um mithilfe von jQuery zu prüfen, ob ein Element vorhanden ist
Es gibt zwei Methoden, um mit jQuery zu prüfen, ob ein Element existiert oder nicht, eine ist die length-Eigenschaft, und die andere ist die Verwendung von Methoden, um unsere eigene exist()-Methode zu erstellen. Dieses Tutorial zeigt, wie man prüft, ob ein Element existiert oder nicht.
Verwenden Sie die Length-Eigenschaft, um mit jQuery zu prüfen, ob ein Element vorhanden ist
Die Eigenschaft length von jQuery kann verwendet werden, um zu prüfen, ob das Element existiert oder nicht; es gibt die gesamten übereinstimmenden Elemente zurück. Wenn length 0 zurückgibt, existiert das Element nicht, und jeder andere Wert bedeutet, dass das Element existiert.
Die Syntax für die Eigenschaft length lautet:
($("element").length)
Die obige Syntax gibt 0 oder eine andere Zahl zurück.
Versuchen wir ein Beispiel, um zu überprüfen, ob ein Element existiert oder nicht, indem wir die Eigenschaft length verwenden. Siehe Beispiel:
<!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>
Der obige Code prüft, ob die Absätze und Überschriften vorhanden sind oder nicht, indem verschiedene Schaltflächen gedrückt werden. Siehe Ausgabe:
Erstellen Sie eine benutzerdefinierte Funktion, um mithilfe von jQuery zu prüfen, ob ein Element vorhanden ist
Versuchen wir nun, unsere eigene Methode zu erstellen, um zu überprüfen, ob das Element in jQuery vorhanden ist oder nicht. Die Syntax zum Erstellen einer Funktion ist:
jQuery.fn.exists = function () {
return this.length > 0;
};
Wie Sie sehen können, haben wir die Eigenschaft length verwendet, um unsere eigene exists-Funktion mit jQuery zu erstellen. Die Eigenschaft length wird verwendet, um die Länge der Elemente zurückzugeben, nicht um ihre Existenz zu prüfen; Deshalb können wir unsere eigene Methode einmal erstellen und überall verwenden.
Siehe Beispiel:
<!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>
Der obige Code verwendet eine benutzerdefinierte Funktion exists, um zu prüfen, ob das Element existiert oder nicht. Die Ausgabe ähnelt der des Beispiels.
Siehe Ausgabe:
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