Wie prüfe ich mit jQuery, ob ein HTML-Element leer ist?

Question

Ich versuche, eine Funktion nur dann aufzurufen, wenn ein HTML-Element leer ist, mit jQuery.

Etwa so:

if (isEmpty($('#element'))) {
    // do something
}

Answer 1

if ($('#element').is(':empty')){
  //do something
}

für weitere Informationen siehe http://api.jquery.com/is/ y http://api.jquery.com/empty-selector/

EDIT:

Wie bereits erwähnt, können die Browser ein leeres Element unterschiedlich interpretieren. Wenn Sie unsichtbare Elemente wie Leerzeichen und Zeilenumbrüche ignorieren und die Implementierung einheitlicher gestalten möchten, können Sie eine Funktion erstellen (oder einfach den darin enthaltenen Code verwenden).

  function isEmpty( el ){
      return !$.trim(el.html())
  }
  if (isEmpty($('#element'))) {
      // do something
  }

Sie können auch ein jQuery-Plugin daraus machen, aber Sie verstehen die Idee.

Answer 2

Ich habe festgestellt, dass dies die einzige zuverlässige Methode ist (da Chrome und FF Leerzeichen und Zeilenumbrüche als Elemente betrachten):

if($.trim($("selector").html())=='')

Answer 3

Leerraum und Zeilenumbrüche sind die Hauptprobleme bei der Verwendung des Selektors :empty. Vorsicht, in CSS verhält sich die Pseudoklasse :empty genauso. Ich mag diese Methode:

if ($someElement.children().length == 0){
     someAction();
}

Answer 4

!elt.hasChildNodes()

Ja, ich weiß, das ist nicht jQuery, aber Sie können das hier verwenden:

!$(elt)[0].hasChildNodes()

Sind Sie jetzt zufrieden?

Answer 5

jQuery.fn.doSomething = function() {
   //return something with 'this'
};

$('selector:empty').doSomething();