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

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

Etwas wie das:

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

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

Weitere Informationen finden Sie unter http://api.jquery.com/is/ und http://api.jquery.com/empty-selector/.

BEARBEITEN:

Wie einige darauf hingewiesen haben, kann die Browserinterpretation eines leeren Elements variieren. Wenn Sie unsichtbare Elemente wie Leerzeichen und Zeilenumbrüche ignorieren und die Implementierung konsistenter 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 es auch zu einem jQuery-Plugin machen, aber Sie haben die Idee.

Ich fand, dass dies der einzig zuverlässige Weg ist (da Chrome & FF Leerzeichen und Zeilenumbrüche als Elemente betrachten):

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

Leerzeichen und Zeilenumbrüche sind die Hauptprobleme bei der Verwendung von: leerer Auswahl. Achtung, in CSS verhält sich die leere Pseudoklasse genauso. Ich mag diese Methode:

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

!elt.hasChildNodes()

Ja, ich weiß, das ist nicht jQuery, also könnten Sie dies verwenden:

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

Jetzt glücklich?

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

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

Wenn mit "leer" gemeint ist, ohne HTML-Inhalt,

if($('#element').html() == "") {
  //call function
}

Leer wie in enthält keinen Text?

if (!$('#element').text().length) {
    ...
}

Im Lebenslauf gibt es viele Optionen, um herauszufinden, ob ein Element leer ist:

1- Verwenden von html:

if (!$.trim($('p#element').html())) {
    // paragraph with id="element" is empty, your code goes here
}

2- Verwenden von text:

if (!$.trim($('p#element').text())) {
    // paragraph with id="element" is empty, your code goes here
}

3- Verwenden von is(':empty'):

if ($('p#element').is(':empty')) {
    // paragraph with id="element" is empty, your code goes here
}

4- Verwenden length

if (!$('p#element').length){
    // paragraph with id="element" is empty, your code goes here
}

Wenn Sie in Sucht suchen, um herauszufinden, ob ein Eingabeelement leer ist, können Sie Folgendes verwenden val:

if (!$.trim($('input#element').val())) {
    // input with id="element" is empty, your code goes here
}

Eine weitere Option, die weniger "Arbeit" für den Browser erfordern sollte als html()oder children():

function isEmpty( el ){
  return !el.has('*').length;
}

document.getElementById("id").innerHTML == "" || null

oder

$("element").html() == "" || null

Du kannst es versuchen:

if($('selector').html().toString().replace(/ /g,'') == "") {
//code here
}

* Ersetzen Sie Leerzeichen, nur für den Fall;)

if($("#element").html() === "")
{

}

Suchen Sie jQuery.isEmptyObject() ?

http://api.jquery.com/jquery.isemptyobject/

Hier ist ein jQuery-Filter, der auf https://stackoverflow.com/a/6813294/698289 basiert

$.extend($.expr[':'], {
  trimmedEmpty: function(el) {
    return !$.trim($(el).html());
  }
});

JavaScript

var el= document.querySelector('body'); 
console.log(el);
console.log('Empty : '+ isEmptyTag(el));
console.log('Having Children : '+ hasChildren(el));


function isEmptyTag(tag) { 
    return (tag.innerHTML.trim() === '') ? true : false ;
}
function hasChildren(tag) {
    //return (tag.childElementCount !== 0) ? true : false ; // Not For IE
    //return (tag.childNodes.length !== 0) ? true : false ; // Including Comments
    return (tag.children.length !== 0) ? true : false ; // Only Elements
}

versuchen Sie es mit irgendetwas davon!

document.getElementsByTagName('div')[0];
document.getElementsByClassName('topbar')[0];

document.querySelectorAll('div')[0];
document.querySelector('div'); // gets the first element.
​

Versuche dies:

if (!$('#el').html()) {
    ...
}

Zeilenumbrüche gelten als Inhalt für Elemente in FF.

<div>
</div>
<div></div>

Ex:

$("div:empty").text("Empty").css('background', '#ff0000');

Im IE werden beide Divs als leer betrachtet, in FF und Chrome ist nur der letzte leer.

Sie können die von @qwertymk bereitgestellte Lösung verwenden

if(!/[\S]/.test($('#element').html())) { // for one element
    alert('empty');
}

oder

$('.elements').each(function(){  // for many elements
    if(!/[\S]/.test($(this).html())) { 
        // is empty
    }
})