13

Como posso detectar se um elemento HTML está vazio com jQuery? Preciso fazer uma condição caso o elemento esteja vazio.

4 Respostas 4

15

Tente isto:

if ($('#element').is(':empty')){
  //seu codigo
}
1
  • Pessoal, estou marcando essa pois foi a que deu certo, e apesar de ter outra igual, ela veio primeiro, antes não estava funcionando pois os elementos que eu queria verificar eram carregados via ajax, porém ja fiz os ajustes e com isso deu certo! Obrigado a todos. 6/01/2014 às 19:44
4

Você pode usar .html().length para verfificar o tamanho do conteudo do elemento.

Exemplo de código:

<div id="minhaDiv"></div>
<div id="minhaDiv2">2</div>
var div = $('#minhaDiv').html().length;     // dá 0
var div2 = $('#minhaDiv2').html().length;   // dá 1
div && console.log('Div 1: ' + div);        // não aparece
div2 && console.log('Div 2: ' + div2);      // aparece

Demo

4

Verificando se não possui nenhum caractere (tamanho zero):

if ($('seletor').is(':empty'))

Verificando se não possui nenhum conteúdo (ignorando espaços em branco):

if ($.trim($('seletor').html()) == '')
9
  • Convém salientar que em adição dos espaços em branco, o $.trim() vai também remover quebras de linha e tabulações que em Firefox e Chrome são considerados como conteúdo do elemento.
    – Zuul
    6/01/2014 às 19:08
  • 1
    Sua segunda opção está trazendo o seguinte erro: Uncaught TypeError: Cannot call method 'trim' of null 6/01/2014 às 19:09
  • 1
    @DenisBernardo Experimenta: if ( $.trim( $('seletor').html() ) == '' ), ou seja, passar o conteúdo recolhido para dentro do TRIM e só depois comparar.
    – Zuul
    6/01/2014 às 19:11
  • @Zuul fiz teste com if ( $.trim( $('seletor').html() ) == '' ) porém está caindo no if de qualquer forma 6/01/2014 às 19:27
  • Adicionei a nota. @DenisBernardo, qual browser você está utilizando?
    – talles
    6/01/2014 às 19:28
0

Você pode utilizar

jQuery(document).ready(function () {

    //esta é uma alternativa mas pode falhar quando existem espaços em branco dentro da tag
    var test = jQuery("#elemento").html();
    if (test.length <= 0) {
        //elemento vazio.. faça algo
        alert("vazio");
    } else {
        //element possui html dentro...
        alert("não vazio");
    }

    //uma outra alternativa conta apenas os filhos dentro

    if (jQuery("#elemento").children().length <= 0) {
        //vazio
        alert("vazio");
    } else {
        //não vazio...
        alert("não vazio");
    }

    //se for verificar apenas o texto utilize .text() ao invés de .html()
});

um exemplo está aqui

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 .