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

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

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