jquery si div id tiene hijos

202

Esta ifcondición es lo que me está dando problemas:

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

Intenté todo lo siguiente:

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

Respuestas:

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

Esto debería funcionar. La children()función devuelve un objeto JQuery que contiene los hijos. Entonces solo necesita verificar el tamaño y ver si tiene al menos un hijo.

S Pangborn
fuente
1
Gracias por la respuesta. Esto es lo que funcionó para mí. Sabía que estaba en el camino correcto con .children (), pero no sabía qué tenía de malo. Aparentemente el tamaño podría ser 0, tiene sentido.
Chris
2
Si agrega un selector a los elementos secundarios, también puede verificar si un elemento tiene elementos secundarios que coinciden con un selector en particular, como si desea ver si un elemento tiene un elemento secundario de una clase en particular.
Muhd
11
problema menor. no significa que hay que elegir, pero se children().lengthdebe llamar en lugar de size () por documentos de jQuery aquí: api.jquery.com/size
Brian Chavez
44
¿Y si el nodo solo contiene texto?
botenvouwer
1
@sirwilliam El nodo volverá con 0 longitud.
Meki
54

Este fragmento determinará si el elemento tiene hijos utilizando el :parentselector:

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

Tenga en cuenta que :parenttambién considera un elemento con uno o más nodos de texto como padre.

Por lo tanto, los divelementos en <div>some text</div>y <div><span>some text</span></div>serán considerados padres, pero <div></div>no lo son.

dcharles
fuente
2
Sí, creo que esta respuesta es más elegante que la de S Pangborn. Sin embargo, ambos son completamente legítimos.
KyleFarris
1
@Milo LaMar, sospecho que no hay mucha diferencia de rendimiento, ¡pero la única forma de estar seguro es probarlo! Además, tendría que eliminar el espacio entre #myfavy :parenten su ejemplo, de lo contrario, el selector no es el mismo que proporcionaría mi respuesta.
dcharles
3
Una cantidad muy pequeña de lectura me respondió lo suficiente. Tomado 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
66
resultados de las pruebas de rendimiento en 0.002s - Yo prefiero esta manera, porque es mejor lectura ...
dtrunk
1
Estoy confundido, ¿no es esta la mejor respuesta?
Andrei Cristian Prodan
47

Otra opción, solo por el gusto de hacerlo, sería:

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

En realidad, puede ser el más rápido ya que utiliza estrictamente el motor Sizzle y no necesariamente cualquier jQuery, por así decirlo. Aunque podría estar equivocado. Sin embargo, funciona.

KyleFarris
fuente
16

En realidad, hay un método nativo bastante simple para esto:

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

Tenga en cuenta que esto también incluye nodos de texto simples, por lo que será cierto para a <div>text</div>.

Simón
fuente
$(...)[0] is undefinedEsto puede suceder si #myfavno se encuentra. Que había prueba la existencia del elemento de primera emparejado antes de aplicar esa condición, es decir: $('#myfav')[0] && $('#myfav')[0].hasChildNodes().
CPHPython
13

y si quieres comprobar que div tiene un hijo perticular (por ejemplo, <p>usa:

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

También puede verificar si div tiene hijos específicos o no, 

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

}
Rakesh Chaudhari
fuente
4

La forma jQuery

En jQuery, puede usar $('#id').children().length > 0para probar si un elemento tiene elementos secundarios.

Manifestación

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 fragmento

El estilo vainilla JS

Si no desea usar jQuery, puede usar document.getElementById('id').children.length > 0para probar si un elemento tiene elementos secundarios.

Manifestación

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 fragmento

John Slegers
fuente