1515 Stimmen

jQuery: Ist Element vorhanden?

Tipp von Stefan Trost | Letztes Update am 02.02.2023 | Erstellt am 28.01.2013

Manchmal möchte man mit jQuery überprüfen, ob ein Element auf der aktuellen Seite existiert. Zum Beispiel, um ein Element nur dann zu laden, wenn es nicht bereits vorhanden ist.

Wir können dabei mit der Eigenschaft "length" arbeiten, die uns jeder beliebige jQuery-Selektor zur Verfügung stellt.

Der Trick: Bei dem Aufruf eines Selektors speichert jQuery alle matchenden Elemente in einem Array. Haben wir einen beliebigen Selektor, können wir über ".length" die Länge dieses Arrays abfragen. Ist die Länge 0, so wissen wir dass es keine Elemente gibt, die auf den jeweiligen Selektor passen - das gefragte Element ist also nicht vorhanden.

Auf Elemente mit einer bestimmten ID prüfen

Schauen wir uns dazu ein Beispiel an. Im folgenden möchten wir auf das Vorhandensein eines Elementes mit einer bestimmten ID prüfen:

if ($('#a').length == 0) {
  alert('Das Element mit der ID "a" ist nicht vorhanden.');
}

if ($('#b').length > 0) {
  alert('Das Element mit der ID "a" ist vorhanden.');
}

Der jQuery-Selektor für IDs stellt dem Namen der gefragten ID eine Raute voran. Mit diesem Code prüfen wir entsprechend, ob es Elemente der IDs "a" oder "b" auf unserer Seite gibt. Im ersten Beispiel möchten wir eine Meldung ausgeben, falls es kein Element mit der gefragten ID "a" gibt (die Länge des Arrays ist also 0). Im zweiten Beispiel drehen wir die Abfrage um und möchten die Meldung für den Fall zeigen, dass ein Element mit der ID "b" vorhanden ist (die Länge des Arrays sollte für diesen Fall also größer als 0 sein).

Auf Elemente mit einer bestimmten Klasse oder einem bestimmten Element-Typ prüfen

Neben der Prüfung auf einzelne Elemente mit einer bestimmten ID können wir auch jeden anderen beliebigen jQuery Selektor verwenden. Daher können wir zum Beispiel auch auf das Vorhandensein von Elementen mit bestimmten Klassen oder auf das Vorhandensein von Elementen mit einem bestimmten Typ testen, indem wir einfach den entsprechenden Selektor dafür verwenden:

if ($('.k').length > 0) {
  alert('Mindestens ein Element der Klasse "k" ist vorhanden.');
}

if ($('img').length > 0) {
  alert('Die Seite enthält ' + $('img').length + ' Bilder.');
}

if ($('h2').length == 0) {
  alert('Die Seite enthält keine H2-Überschriften.');
}

if ($('#a.b').length > 0) {
  alert('Das Element mit der ID a hat Klasse b zugewiesen.');
}

if ($('ul>li').length > 0) {
  alert('Es befinden sich ' + $('ul>li').length + ' LI-Elemente unter UL.');
}

Mit diesen Beispielen schauen wir zum Beispiel nach, ob es auf der Seite Elemente der Klasse "k", Bilder oder h2-Überschriften gibt (im Falle der Bilder geben wir auch die Anzahl der Bilder aus). Außerdem testen wir, ob es ein Element mit der ID "a" gibt, dem die Klasse "b" zugewiesen ist und wie viele LI-Elemente sich innerhalb einer UL-Liste befinden.

Wie man sieht: Es sind alle typischen jQuery-Selektoren möglich.

AntwortenPositivNegativ
911 Stimmen

Wer es noch einfacher haben will, lässt einfach das "> 0" weg und kommt damit zu dem selben Ergebnis:

if ($('#b').length) {
  alert('Das Element mit der ID "a" ist vorhanden.');
}

Es funktioniert auch so, da die Bedingung bei einer Länge von 0 "false" liefert und "true" bei einer Länge größer 0.
10.09.2013 um 13:53

AntwortenPositiv Negativ
Antworten

Über den Autor

AvatarSoftware von Stefan Trost finden Sie auf sttmedia.de. Benötigen Sie eine individuelle Software nach Ihren eigenen Wünschen? Schreiben Sie uns: sttmedia.de/kontakt
Profil anzeigen

 

Ähnliche Themen

jQuery: CSS Stylesheet Switcher

Tutorial | 1 Kommentar

Wichtiger Hinweis

Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.

Jetzt mitmachen

Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.