202

Questa condizione ifè ciò che mi dà problemi:

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

Ho provato tutto quanto segue:

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

442

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

Questo dovrebbe funzionare. La children()funzione restituisce un oggetto JQuery che contiene i figli. Quindi devi solo controllare le dimensioni e vedere se ha almeno un figlio.

— S Pangborn
fonte

1

Grazie per la risposta. Questo è ciò che ha funzionato per me. Sapevo di essere sulla strada giusta con .children (), ma non sapevo cosa ci fosse di sbagliato. Apparentemente la dimensione potrebbe essere 0, ha senso.

— Chris,

2

Se aggiungi un selettore ai figli, puoi anche verificare se un elemento ha figli che corrispondono a un particolare selettore, come se volessi vedere se un elemento ha un figlio di una classe particolare.

— Muhd,

11

problema minore. non significa nitpick ma children().lengthdovrebbe essere chiamato invece di size () per i documenti jQuery qui: api.jquery.com/size

— Brian Chavez

4

E se il nodo contiene solo testo !?

— botenvouwer,

1

@sirwilliam Il nodo tornerà con lunghezza 0.

— Meki,

54

Questo frammento determinerà se l'elemento ha figli utilizzando il :parentselettore:

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

Nota che :parent considera anche un elemento con uno o più nodi di testo come genitore.

Pertanto, gli divelementi in <div>some text</div>e <div><span>some text</span></div>saranno ciascuno considerato un genitore ma <div></div>non è un genitore.

— dcharles
fonte

2

Sì, penso che questa risposta sia più elegante di quella di S Pangborn. Entrambi sono completamente legittimi però.

— KyleFarris,

1

@Milo LaMar, sospetto che non ci sia molta differenza nelle prestazioni, ma l'unico modo per essere sicuri è provarlo! Inoltre, dovresti rimuovere lo spazio tra #myfave :parentnel tuo esempio, altrimenti il selettore non è lo stesso di quello che la mia risposta fornirebbe.

— dcharles,

3

Una quantità molto piccola di lettura mi ha risposto abbastanza. Tratto da 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

risultati del test delle prestazioni in 0,002s - preferisco così, perché è meglio leggibile ...

— dtrunk

1

Sono confuso, non è questa la risposta migliore?

— Andrei Cristian Prodan,

47

Un'altra opzione, solo per il diavolo sarebbe:

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

Potrebbe effettivamente essere il più veloce poiché utilizza rigorosamente il motore Sizzle e non necessariamente qualsiasi jQuery, per così dire. Potrebbe essere sbagliato però. Tuttavia, funziona.

— KyleFarris
fonte

16

In realtà esiste un metodo nativo abbastanza semplice per questo:

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

Nota che questo include anche semplici nodi di testo, quindi sarà vero per a <div>text</div>.

— Simon
fonte

$(...)[0] is undefinedquesto può accadere se #myfavnon viene trovato. Mi piacerebbe verificare l'esistenza del primo elemento abbinato prima di applicare tale condizione, vale a dire: $('#myfav')[0] && $('#myfav')[0].hasChildNodes().

— CPHPython,

13

e se vuoi controllare che div abbia un figlio perticolare ( <p>usa:

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

— suhailvs
fonte

7

Puoi anche verificare se div ha figli specifici oppure no,

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

}

— Rakesh Chaudhari
fonte

4

Il modo jQuery

In jQuery, puoi usare $('#id').children().length > 0 per verificare se un elemento ha figli.

dimostrazione

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>

Espandi frammento

Il modo JS alla vaniglia

Se non si desidera utilizzare jQuery, è possibile utilizzare document.getElementById('id').children.length > 0 per verificare se un elemento ha figli.

dimostrazione

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>

Espandi frammento

— John Slegers
fonte

jquery se div id ha figli

Il modo jQuery

dimostrazione

Il modo JS alla vaniglia

dimostrazione