it-swarm.com.de

jabfrage ob div id kinder hat

Diese if- Bedingung bereitet mir Probleme:

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

Ich habe folgendes ausprobiert:

if ( $('#myfav:hasChildren') ) { do something }
if ( $('#myfav').children() ) { do something }
if ( $('#myfav:empty') ) { do something }
if ( $('#myfav:not(:has(*))') ) { do something }
191
Chris
if ( $('#myfav').children().length > 0 ) {
     // do something
}

Das sollte funktionieren. Die Funktion children() gibt ein JQuery-Objekt zurück, das die untergeordneten Objekte enthält. Sie müssen also nur die Größe überprüfen und feststellen, ob mindestens ein Kind darin ist.

413
S Pangborn

Dieses Snippet bestimmt, ob dem Element untergeordnete Elemente zugeordnet sind, indem :parent Selektor:

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

Beachten Sie, dass :parent betrachtet ein Element mit einem oder mehreren Textknoten auch als übergeordnetes Element.

Also die div Elemente in <div>some text</div> und <div><span>some text</span></div> wird jeweils als Elternteil betrachtet, aber <div></div> ist kein Elternteil.

51
dcharles

Eine andere Option, nur zum Teufel, wäre:

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

Kann tatsächlich die schnellste sein, da ausschließlich die Sizzle-Engine und nicht unbedingt irgendeine jQuery verwendet wird. Könnte aber falsch sein. Trotzdem klappt es.

47
KyleFarris

Hierfür gibt es eine recht einfache native Methode:

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

Beachten Sie, dass dies auch einfache Textknoten umfasst, sodass dies für einen <div>text</div> Gilt.

16
Simon

und wenn du überprüfen willst, ob div ein bestimmtes Kind hat (sag <p>), benutze:

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

Sie können auch überprüfen, ob div bestimmte Kinder hat oder nicht,

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

}
4

Der jQuery-Weg

In jQuery können Sie mit $('#id').children().length > 0 testen, ob ein Element untergeordnete Elemente hat.

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>

Der Vanille JS Weg

Wenn Sie jQuery nicht verwenden möchten, können Sie mit document.getElementById('id').children.length > 0 testen, ob ein Element untergeordnete Elemente hat.

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>
3
John Slegers