jquery wenn div id Kinder hat

201

Diese ifBedingung macht mir Probleme:

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

Ich habe Folgendes versucht:

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

Antworten:

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

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

S Pangborn
quelle
1
Danke für die Antwort. Das hat bei mir funktioniert. Ich wusste, dass ich mit den .children () auf dem richtigen Weg war, wusste aber nicht, was daran falsch war. Anscheinend könnte die Größe 0 sein, macht Sinn.
Chris
2
Wenn Sie untergeordneten Elementen einen Selektor hinzufügen, können Sie auch überprüfen, ob ein Element untergeordnete Elemente hat, die mit einem bestimmten Selektor übereinstimmen, z. B. wenn Sie sehen möchten, ob ein Element ein untergeordnetes Element einer bestimmten Klasse hat.
Muhd
11
geringes Problem. Ich will nicht picken, sondern children().lengthsollte anstelle von size () pro jQuery-Dokument hier aufgerufen
Brian Chavez
4
Und was ist, wenn der Knoten nur Text enthält?
Botenvouwer
1
@sirwilliam Der Knoten wird mit der Länge 0 zurückgegeben.
Meki
54

Dieses Snippet bestimmt mithilfe des :parentSelektors , ob das Element untergeordnete Elemente hat :

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

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

Somit werden die divElemente in <div>some text</div>und <div><span>some text</span></div>jeweils als Eltern betrachtet, sind jedoch <div></div>keine Eltern.

Dcharles
quelle
2
Ja, ich denke, diese Antwort ist eleganter als die von S Pangborn. Beide sind jedoch völlig legitim.
KyleFarris
1
@Milo LaMar, ich würde vermuten, dass es keinen großen Leistungsunterschied gibt, aber der einzige Weg, um sicher zu sein, ist es, es zu versuchen! Außerdem müssten Sie den Abstand zwischen #myfavund :parentin Ihrem Beispiel entfernen , da sonst der Selektor nicht mit dem übereinstimmt, was meine Antwort liefern würde.
Dcharles
3
Eine sehr kleine Menge Lesen antwortete mir genug. Entnommen aus 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
Leistungstestergebnisse in 0,002s - ich bevorzuge diesen Weg, weil es am besten lesbar ist ...
dtrunk
1
Ich bin verwirrt, ist das nicht die beste Antwort?
Andrei Cristian Prodan
47

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 verwendet wird und nicht unbedingt jede jQuery. Könnte aber falsch sein. Trotzdem funktioniert es.

KyleFarris
quelle
16

Dafür gibt es eigentlich eine recht einfache native Methode:

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

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

Simon
quelle
$(...)[0] is undefinedDies kann passieren, wenn #myfaves nicht gefunden wird. Ich würde die Existenz des ersten übereinstimmenden Elements testen, bevor ich diese Bedingung anwende, dh : $('#myfav')[0] && $('#myfav')[0].hasChildNodes().
CPHPython
13

und wenn Sie überprüfen möchten, hat div ein bestimmtes Kind (sagen Sie <p>verwenden:

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

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");

}
Rakesh Chaudhari
quelle
4

Der jQuery-Weg

In jQuery können Sie $('#id').children().length > 0testen, 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>
Erweitern Sie das Snippet

Der Vanille JS Weg

Wenn Sie jQuery nicht verwenden möchten, können Sie document.getElementById('id').children.length > 0damit 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>
Erweitern Sie das Snippet

John Slegers
quelle