web-dev-qa-db-fra.com

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

J'essaie d'appeler une fonction uniquement si un élément HTML est vide, à l'aide de jQuery.

Quelque chose comme ça:

if (isEmpty($('#element'))) {
    // do something
}
javascriptjquery
312
vitto
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 par le navigateur d'un élément vide peut varier. Si vous souhaitez ignorer des éléments invisibles tels que des espaces et des 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 l’idée.

525
Emil

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

if($.trim($("selector").html())=='')
112
Serge Shultz

Les espaces et les sauts de ligne sont les principaux problèmes liés à l’utilisation du 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();
}
58
DMTintner
!elt.hasChildNodes()

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

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

Heureux maintenant?

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

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

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

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

Vide comme dans ne contient pas de texte?

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

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

1- Utiliser html:

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

2- Utiliser text:

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

3- Utiliser is(':empty'):

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

4- Utiliser length

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

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
}
6
RuiVBoas

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

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

Tu peux essayer:

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

* Remplacer les espaces blancs, juste en cas;)

0
Marc Uberstein
document.getElementById("id").innerHTML == "" || null

ou

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