Comment vérifier si un élément HTML est vide en utilisant jQuery ?

Question

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
}

Answer 1

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

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

EDIT :

Comme certains l'ont souligné, l'interprétation d'un élément vide par le navigateur 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 qu'elle contient).

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

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

Answer 2

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

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

Answer 3

Les espaces blancs et les sauts de ligne sont les principaux problèmes liés à l'utilisation du sélecteur :empty. 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();
}

Answer 4

!elt.hasChildNodes()

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

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

Heureux maintenant ?

Answer 5

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

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