jquery se div id tiver filhos

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

Respostas:

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