web-dev-qa-db-fra.com

Comment vérifier si c'est div vide

Dupliquer possible:
Vérifier si un élément html est vide avec jQuery

J'ai une div vide comme ceci: 

<div id="cartContent"></div>

Je dois vérifier si c'est vide. S'il est vide, il doit renvoyer true, puis certains 

les éléments sont ajoutés. Sinon, il retourne false et une autre fonction s'exécute. Quel est le meilleur moyen de vérifier s’il en existe 

éléments dans la div?

Merci

javascriptjqueryoperators
12
user208709

Vous pouvez utiliser .is() .

if( $('#leftmenu').is(':empty') ) {

Ou vous pouvez simplement tester la propriété length pour voir si une propriété a été trouvée:

if( $('#leftmenu:empty').length ) {

Vous pouvez utiliser $.trim() pour supprimer les espaces (si c'est ce que vous voulez) et vérifier la longueur du contenu.

if( !$.trim( $('#leftmenu').html() ).length ) {
30
Gordon Freeman

Utilisation de javascript simple

 var isEmpty = document.getElementById('cartContent').innerHTML === "";

Et si vous utilisez jQuery cela peut être fait comme

 var isEmpty = $("#cartContent").html() === "";
31
dopeddude

Comme d'autres l'ont déjà noté, vous pouvez utiliser :empty dans jQuery comme ceci:

$('#cartContent:empty').remove();

Cela supprimera le #cartContent div s'il est vide.

Mais cette technique, ainsi que d’autres que les gens suggèrent ici, ne feront peut-être pas ce que vous voulez, car si elle contient des nœuds de texte contenant des espaces, elle n’est pas considérée comme vide. Donc ce n'est pas vide:

<div> </div>

alors que vous voudrez peut-être le considérer comme vide.

J'ai eu ce problème il y a quelque temps et j'ai écrit ce minuscule plugin jQuery - ajoutez-le simplement à votre code:

jQuery.expr[':'].space = function(elem) {
  var $elem = jQuery(elem);
  return !$elem.children().length && !$elem.text().match(/\S/);
}

et maintenant vous pouvez utiliser 

$('#cartContent:space').remove();

qui supprimera la div si elle est vide ou ne contient que des espaces. Bien sûr, vous pouvez non seulement l'enlever mais faire tout ce que vous voulez, comme 

$('#cartContent:space').append('<p>It is empty</p>');

et vous pouvez utiliser :not comme ceci:

$('#cartContent:not(:space)').append('<p>It is not empty</p>');

Je suis sorti avec ce test qui a fait de manière fiable ce que je voulais et vous pouvez le retirer du plugin pour l'utiliser comme test autonome:

Celui-ci fonctionnera pour les objets jQuery:

function testEmpty($elem) {
  return !$elem.children().length && !$elem.text().match(/\S/);
}

Celui-ci fonctionnera pour les nœuds DOM:

function testEmpty(elem) {
  var $elem = jQuery(elem);
  return !$elem.children().length && !$elem.text().match(/\S/);
}

C'est mieux que d'utiliser .trim car le code ci-dessus teste d'abord si l'élément testé a des éléments enfants et si c'est le cas, il essaie de trouver le premier caractère non blanc, puis s'arrête, sans qu'il soit nécessaire de lire ou de muter la chaîne si elle a même un caractère qui n'est pas un espace.

J'espère que ça aide.

9
rsp

Vous pouvez utiliser la fonction is

if( $('#cartContent').is(':empty') ) { }

ou utilisez la longueur

if( $('#cartContent:empty').length ) { }
6
muthu
var empty = $("#cartContent").html().trim().length == 0;
3
Kevin Bowersox
if ($("#cartContent").children().length == 0) 
{
     // no child
}
1
Iswanto San