Comment vérifier si un élément HTML est vide à l'aide de jQuery?

J'essaie d'appeler une fonction uniquement si un élément HTML est vide, en utilisant jQuery.

Quelque chose comme ça:

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

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

pour plus d'informations, voir http://api.jquery.com/is/ et http://api.jquery.com/empty-selector/

ÉDITER:

Comme certains l'ont souligné, l'interprétation par le navigateur d'un élément vide peut varier. Si vous souhaitez ignorer les éléments invisibles tels que les espaces et les sauts de ligne et rendre l'implémentation plus cohérente, vous pouvez créer une fonction (ou simplement utiliser le code à l'intérieur).

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

Vous pouvez également en faire un plugin jQuery, mais vous avez l'idée.

J'ai trouvé que c'était le seul moyen fiable (puisque Chrome et FF considèrent les espaces blancs et les sauts de ligne comme des éléments):

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

Les espaces blancs et les sauts de ligne sont les principaux problèmes liés à l'utilisation de: sélecteur vide. Attention, en CSS, la pseudo-classe: empty se comporte de la même manière. J'aime cette méthode:

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

!elt.hasChildNodes()

Oui, je sais, ce n'est pas jQuery, vous pouvez donc l'utiliser:

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

Heureux maintenant?

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

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

Si par "vide", vous voulez dire sans contenu HTML,

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

Vide comme dans ne contient pas de texte?

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

En résumé, il existe de nombreuses options pour savoir si un élément est vide:

1- Utilisation html:

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

2- Utilisation text:

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

3- Utilisation is(':empty'):

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

4- Utilisation length

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

De plus, si vous essayez de savoir si un élément d'entrée est vide, vous pouvez utiliser val:

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

Une autre option qui devrait nécessiter moins de "travail" pour le navigateur que html()ou children():

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

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

ou

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

Tu peux essayer:

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

* Remplacez les espaces blancs, au cas où;)

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

}

Cherchez-vous jQuery.isEmptyObject()?

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

Voici un filtre jQuery basé sur https://stackoverflow.com/a/6813294/698289

$.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
}

essayez d'utiliser tout cela!

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

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

Essaye ça:

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

Les sauts de ligne sont considérés comme du contenu aux éléments dans FF.

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

Ex:

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

Dans IE, les deux divs sont considérées comme vides, dans FF an Chrome, seul le dernier est vide.

Vous pouvez utiliser la solution fournie par @qwertymk

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

ou

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