Check if HTML is visually filled

Question

Check if HTML is visually filled

Navigation

#1 by (5 votes)
#2 by (2 votes)

3

I have this div:

<div class="listagem-usuarios">
    //Aqui eu deixo vazio e insiro algo quando necessário através do append
</div>

I would like to check if there is nothing inside this div.

I did so:

if($('.listagem-usuarios').is(':empty')){
    alert('está vazio!');
}else{
   alert('não ta vazio!');
}

But it does have a however ... Sometimes I hide what's inside the div through .hide() ; So, even if% visually is empty, it will look as if it is filled in.

Is there any way to check for hidden elements or not?

In short, I need to know whether HTML is visually populated or not, whether it really has no element or is hidden.

javascript html jquery

asked by anonymous 26.12.2018 / 16:45

2 answers

2

Use the children() function of JQuery to fetch the children of your div, after that verify that the number of children is greater than zero:

if ( $('.listagem-usuarios').children(':visible').length > 0 ) {
     alert('Não está vazio!');        
}
else {
    alert('Está vazio!');
}

26.12.2018 / 16:51

Print a character in place of a number Background disappears when my menu items are horizontal

score 5 · Accepted Answer

Use the deny selector ":not(:hidden)" in .children() :

$('.listagem-usuarios').children(":not(:hidden)").length

This will exclude elements with display: none of the search ( display: none is a result of the .hide() method). In the example below, there is a hidden div:

$(".bt1").click(function(){
   $('.listagem-usuarios').append('<div>abc <a href="javascript: void(0)" onclick="this.parentNode.remove()">Excluir</a></div>');
});

$(".bt2").click(function(){
   console.clear();
   if($('.listagem-usuarios').children(":not(:hidden)").length){
      console.log('não tá vazio!');
   }else{
       console.log('está vazio!');
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Cliqueem"Verificar" antes de adicionar elementos:
<br>
<button class="bt1">Adicionar elementos</button>
<div class="listagem-usuarios">
   <div style="display: none;">div oculta</div>
</div>
<button class="bt2">Verificar</button>

Another way is to check for the content of the div ( .contents() ). For example, if there is a text node (a text without a container), .children() will not find and will inform you that the div is empty, when it is not actually.

For example:

<div class="listagem-usuarios">
   <div style="display: none;">div oculta1</div>
   <div style="display: none;">div oculta2</div>
   abc <<< nó de texto não detectado pelo .children()
</div>

The .contents() will return all internal nodes of the div in array form. Any text, element, or line break is considered a node. So by taking the content you can go through all the nodes by checking what is visible and not empty (whitespace):

$(".bt1").click(function(){
   $('.listagem-usuarios').append('abc ');
});

$(".bt3").click(function(){
   $('.listagem-usuarios').append('<div>uma div</div>');
});

$(".bt2").click(function(){
   
   var achou;
   var html = $('.listagem-usuarios').contents();
   for(var item of html){
      if(!$(item).is(":hidden") && $(item).text().trim().length){
         achou = true;
         break;
      }
   }
   
   if(achou){
      console.log('não tá vazio!');
   }else{
       console.log('está vazio!');
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><buttonclass="bt1">Adicionar texto puro</button>
<button class="bt3">Adicionar um elemento</button>
<div class="listagem-usuarios">
  <div style="display: none">div oculta</div>
</div>
<button class="bt2">Verificar</button>