Viele Benutzer haben Zweifel, wie sie mit jQuery überprüfen können, ob ein Element im HTML-DOM vorhanden ist. Kurz gesagt, wie kann man auf einfachste Weise überprüfen, ob ein Element auf der Seite vorhanden ist?
Es gibt mehrere Möglichkeiten, wie wir dieses Ergebnis erzielen können. Eine davon besteht darin, zu prüfen, ob die Eigenschaft „Länge“ des Elements Elektors eine Zahl größer als 0 zurückgibt.
Zum Beispiel, wenn wir HTML ähnlich dem unten gezeigten haben.
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Lorem ipsum dolor</title>
5 <meta charset="utf-8">
6</head>
7<body>
8 <div id="myDiv">Lorem ipsum dolor sit amet.</div>
9</body>
10</html>
Und wir wollen prüfen, ob das Element „myDiv“ im DOM existiert, d. h. auf der Seite können wir den folgenden Code verwenden.
1if ($("#myDiv").length > 0) {
2 console.log("The element exists!");
3}
Vereinfachung des Codes
Da viele Dinge in JavaScript entweder wahr oder falsch sind, kann die Rückgabe der Eigenschaft „length“ ebenfalls als wahr oder falsch betrachtet werden. Die Rückgabe ist eine Zahl, 0 steht für „falsch“ und alles andere für „wahr“.
Wir können den Code also wie folgt vereinfachen.
1if ($("#myDiv").length) {
2 console.log("The element exists!");
3}
Auch wenn der Vergleich „> 0“ entfernt wird, bleibt der Rückgabewert gleich.
Erstellen einer „exists“-Funktion für jQuery
Wir können noch etwas weiter gehen und eine Funktion namens „exists“ hinzufügen. Diese Funktion kann direkt mit dem zu prüfenden Element verwendet werden.
1jQuery.fn.exists = function() {
2 return ( $(this).length > 0);
3}
4
5var elementExists = $("#myDiv").exists();
6
7console.log(elementExists);
Wir können uns noch weiter verbessern und verhindern, dass das Verfahren eine Verkettung Möglichkeit darstellt. Was in diesem Fall nicht möglich ist. Wir werden es wie folgt tun.
1jQuery.exists = function(selector) {
2 return ( $(selector).length > 0 );
3}
4
5if ( $.exists("#myDiv") ) {
6 console.log("The element exists!");
7}
Beachten Sie, dass wir jetzt den Selektor als Argument an die „exists“-Funktion übergeben, anstatt eine Kette direkt aus dem Objekt zu simulieren.
Überprüfen der Existenz eines HTML-Elements mit Array
Wenn wir einen Selektor in jQuery verwenden, gibt er ein Array von Elementen zurück. Wenn wir versuchen, auf das erste Element dieses Arrays zuzugreifen und es „undefiniert“ zurückgibt, zeigt dies an, dass das betreffende Element nicht im DOM existiert.
1if ( $('#myDiv')[0] ) {
2 console.log("The element exists!");
3}
Wie Sie sehen, gibt es mehrere Möglichkeiten, das Vorhandensein eines HTML-Elements auf der Seite zu überprüfen. Was ist das Beste? Nun, derjenige, der Ihr Problem löst. Das Wichtigste ist, dass Ihr Code ausgeführt wird und funktioniert.