22 Stimmen

jQuery: Überprüfen, ob ein DIV Container leer ist

Frage von PC Control | 21.04.2012 um 16:26

Ich möchte mit Hilfe von jQuery testen, ob ein DIV-Container leer ist, zum Beispiel dieser Container hier:

<div id="meindiv"></div>

Gibt es da eine bestimmte Funktion, die jQuery mitbringt, die man zu diesem Zweck verwenden kann?

AntwortenPositivNegativDatumStimmen
3Beste Antwort3 Stimmen

Du kannst es zum Beispiel ganz einfach so machen:

if ($('#meindiv').html()) {
   alert('Der Container enthält etwas.');
} else {
   alert('Der Container ist leer.');
}

Oder so:

if ($('#meindiv').is(':empty')) {
   alert('Der Container ist leer.');
} else {
   alert('Der Container enthält etwas.');
}

Im ersten Beispiel rufen wir mit .html() den Inhalt des Elements ab. Die if-Bedingung ist dann true, wenn irgendein Inhalt in dem Container war und false, wenn das Ergebnis von .html() leer war.

Im zweiten Beispiel nutzen wir den jQuery Selektor :empty und wir fragen ab, ob das betreffende Element zu den leeren Elementen gehört (is(':empty')).

Whitespace im DIV

Was passiert im folgenden Fall, wenn nur Whitespace wie Leerzeichen, Tabs oder Zeilenumbrüche im DIV sind?

<div id="meindiv"> </div>

Die beiden Funktionen oben würden sagen, dass das DIV einen Inhalt enthält. Wenn wir das bei bloßem Whitespace im Container nicht möchten, können wir uns folgendem Trick bedienen:

if ($('#meindiv').html().trim()) {
   alert('Der Container enthält etwas.');
} else {
   alert('Container ist leer oder enthält Whitespace.');
}

Mit trim() sorgen wir dafür, dass der Whitespace vor und hinter dem "eigentlichen" Inhalt entfernt wird. Zurück bleibt ein leerer String für den Fall, dass der Container vorher nur Whitespace enthielt und das Ergebnis der if-Bedingung wird false. Nur wenn wirklich irgendeinen Text in dem Element steht, wird die Bedingung true.
23.04.2012 um 16:13

AntwortenPositiv Negativ
00 Stimmen

Funktioniert prima. Lediglich der IE kann mit trim() nichts anfangen. Habt ihr dafür schon eine Idee?
18.05.2014 um 09:12

AntwortenPositiv Negativ
-11 Stimme

Ungetestet: Wenn wir diesen Code verwenden, haben wir ja sowieso jQuery eingebunden und können daher auch die trim-Funktion von jQuery nutzen:

var s = ' abc ';
$.trim(s);  // 'abc'

Oder eingebaut in den Code von oben:

if ($.trim($('#meindiv').html())) {
   alert('Der Container enthält etwas.');
} else {
   alert('Leer oder Whitespace.');
}

Funktioniert es so bei dir?
19.05.2014 um 04:43

Positiv Negativ
00 Stimmen

Hier noch etwas dazu:

Der Internet Explorer und die Trim-Funktion

Darin beschreibe ich auch die Möglichkeit, die trim-Funktion für den IE zu definieren.
23.05.2014 um 02:51

Positiv Negativ
Antworten
Antworten

Ähnliche Themen

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.