jQuery: Ist Element vorhanden?

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.