3

Eu tenho essa div:

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

Gostaria de verificar se dentro dessa div não existe nada.

Fiz assim:

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

Só que tem um porém... Ás vezes, eu escondo o que está dentro da div através do .hide(); Logo, mesmo se o HTML visualmente estiver vazio, ele vai dar como se estivesse preenchido.

Tem alguma maneira de verificar se tem elementos escondidos ou não?

Resumindo, preciso saber se o HTML visualmente está preenchido ou não, independente se realmente não tiver nenhum elemento ou se só está escondido.

2 Respostas 2

5

Use o seletor de negação ":not(:hidden)" em .children():

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

Isso irá excluir elementos com display: none da busca (o display: none é resultado do método .hide()). No exemplo abaixo, existe uma div oculta:

$(".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>
Clique em "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>

Outra forma é verificar pelo conteúdo da div (.contents()). Por exemplo, se houver um nó de texto (um texto sem um contêiner), o .children() não irá encontrar e irá informar que a div está vazia, quando na verdade não está.

Por exemplo:

<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>

O .contents() irá retornar todos os nós internos da div em forma de array. Qualquer texto, elemento ou quebra de linha é considerado um nó. Então pegando o conteúdo você pode percorrer todos os nós verificando o que é visível e não está vazio (espaços em branco):

$(".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>
<button class="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>

2

Utilize a função children() do JQuery para pegar os filhos da sua div, após isso verifique se a quantidade de filhos é maior do que zero:

if ( $('.listagem-usuarios').children(':visible').length > 0 ) {
     alert('Não está vazio!');        
}
else {
    alert('Está vazio!');
}
3
  • Não funcionou... cai sempre no else. Não sei se pode ser pq os elementos são inseridos com append...
    – user134546
    Commented 26/12/2018 às 15:56
  • Poste seu código de como fica seu html quando está oculto por favor. Commented 26/12/2018 às 15:59
  • Me desculpe, eu havia lido a pergunta como se ele quisesse pegar todos os filhos de uma div. Não percebi que queria ignorar os ocultos. Commented 26/12/2018 às 16:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .