202

Essa ifcondição é o que está me causando problemas:

if (div id=myfav has children) {
   do something
} else {
   do something else 
}

Eu tentei o seguinte:

if ( $('#myfav:hasChildren') ) { do something }
if ( $('#myfav').children() ) { do something }
if ( $('#myfav:empty') ) { do something }
if ( $('#myfav:not(:has(*))') ) { do something }

jquery children

— Chris
fonte

441

if ( $('#myfav').children().length > 0 ) {
     // do something
}

Isso deve funcionar. A children()função retorna um objeto JQuery que contém os filhos. Então você só precisa verificar o tamanho e ver se ele tem pelo menos um filho.

— S Pangborn
fonte

1

Obrigado pela resposta. Isto é o que funcionou para mim. Eu sabia que estava no caminho certo com os .children (), mas não sabia o que havia de errado com ele. Aparentemente, o tamanho pode ser 0, faz sentido.

— Chris

2

Se você adicionar um seletor a filhos, também poderá verificar se um elemento possui filhos que correspondem a um seletor específico, como se você deseja ver se um elemento tem um filho de uma classe específica.

— Muhd

11

questão menor. Não quero nitpick mas children().lengthdeve ser chamado em vez de tamanho () por docs jQuery aqui: api.jquery.com/size

— Brian Chavez

4

E se o nó contiver apenas texto !?

— botenvouwer

1

@sirwilliam O nó retornará com 0 comprimento.

— Meki

54

Esse trecho determinará se o elemento tem filhos usando o :parentseletor:

if ($('#myfav').is(':parent')) {
    // do something
}

Observe que :parenttambém considera um elemento com um ou mais nós de texto como pai.

Portanto, os divelementos em <div>some text</div>e <div><span>some text</span></div>serão considerados pais, mas <div></div>não são pais.

— dcharles
fonte

2

Sim, acho que essa resposta é mais elegante que a de S Pangborn. Ambos são completamente legítimos.

— KyleFarris 6/10/09

1

@Milo LaMar, eu suspeitaria que não há muita diferença de desempenho, mas a única maneira de ter certeza é experimentá-lo! Além disso, você precisaria remover o espaço entre #myfave :parentno seu exemplo, caso contrário, o seletor não é o mesmo que minha resposta forneceria.

— dcharles 12/01

3

Uma quantidade muito pequena de leitura respondeu o suficiente para mim. Retirado de api.jquery.com/parent-selector

Additional Notes: Because :parent is a jQuery extension and not part of the CSS specification, queries using :parent cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :parent to select elements, first select the elements using a pure CSS selector, then use .filter(":parent").

— Milo LaMar

6

desempenho resultados do teste em 0.002s - eu preferem esta forma, porque é melhor legível ...

— dtrunk

1

Estou confuso, essa não é a melhor resposta?

— Andrei Cristian Prodan

47

Outra opção, apenas para o inferno seria:

if ( $('#myFav > *').length > 0 ) {
     // do something
}

Na verdade, pode ser o mais rápido, pois usa estritamente o mecanismo Sizzle e não necessariamente qualquer jQuery, por assim dizer. Pode estar errado. No entanto, funciona.

— KyleFarris
fonte

16

Na verdade, existe um método nativo bastante simples para isso:

if( $('#myfav')[0].hasChildNodes() ) { ... }

Observe que isso também inclui nós de texto simples, portanto será verdadeiro para a <div>text</div>.

— Simon
fonte

$(...)[0] is undefinedisso pode acontecer se #myfavnão for encontrado. Eu testar a existência do primeiro elemento combinado antes para aplicar essa condição, ou seja: $('#myfav')[0] && $('#myfav')[0].hasChildNodes().

— CPHPython

13

e se você quiser verificar div tem filhos perticulares (diga <p>use:

if ($('#myfav').children('p').length > 0) {
     // do something
}

— suhailvs
fonte

7

Você também pode verificar se div tem filhos específicos ou não,

if($('#myDiv').has('select').length>0)
{
   // Do something here.
   console.log("you can log here");

}

— Rakesh Chaudhari
fonte

4

A maneira jQuery

No jQuery, você pode usar $('#id').children().length > 0para testar se um elemento tem filhos.

Demo

var test1 = $('#test');
var test2 = $('#test2');

if(test1.children().length > 0) {
    test1.addClass('success');
} else {
    test1.addClass('failure');
}

if(test2.children().length > 0) {
    test2.addClass('success');
} else {
    test2.addClass('failure');
}

.success {
    background: #9f9;
}

.failure {
    background: #f99;
}

<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<div id="test">
   <span>Children</span>
</div>
<div id="test2">
   No children
</div>

Expandir snippet

O caminho da baunilha JS

Se você não quiser usar o jQuery, poderá document.getElementById('id').children.length > 0testar se um elemento tem filhos.

Demo

var test1 = document.getElementById('test');
var test2 = document.getElementById('test2');

if(test1.children.length > 0) {
    test1.classList.add('success');
} else {
    test1.classList.add('failure');
}

if(test2.children.length > 0) {
    test2.classList.add('success');
} else {
    test2.classList.add('failure');
}

.success {
    background: #9f9;
}

.failure {
    background: #f99;
}

<div id="test">
   <span>Children</span>
</div>
<div id="test2">
   No children
</div>

Expandir snippet

— John Slegers
fonte

jquery se div id tiver filhos

A maneira jQuery

Demo

O caminho da baunilha JS

Demo