jquery, ob div id Kinder hat

Lesezeit: 4 Minuten

jquery ob div id Kinder hat
Chris

Dies if-Bedingung macht mir Probleme:

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

Ich habe alles versucht:

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

1643043665 416 jquery ob div id Kinder hat
S Pangborn

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

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

  • Danke für die Antwort. Das ist, was für mich funktioniert hat. Ich wusste, dass ich mit .children() auf dem richtigen Weg war, wusste aber nicht, was daran falsch war. Anscheinend könnte die Größe 0 sein, macht Sinn.

    – Chris

    6. Oktober 09 um 18:57 Uhr

  • Wenn Sie untergeordneten Elementen einen Selektor hinzufügen, können Sie auch prü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

    5. Mai 11 um 3:43 Uhr

  • geringes Problem. will nicht pingelig sein, aber children().length sollte hier anstelle von size() per jQuery docs aufgerufen werden: api.jquery.com/size

    – Brian Chávez

    7. Mai 11 um 5:06 Uhr


  • Und was ist, wenn der Knoten nur Text enthält!?

    – botenvouwer

    9. August 13 um 9:43 Uhr

  • @sirwilliam Der Knoten wird mit einer Länge von 0 zurückgegeben.

    – Meki

    14. September 15 um 12:50 Uhr

jquery ob div id Kinder hat
dcharles

Dieses Snippet bestimmt, ob das Element untergeordnete Elemente hat, die das verwenden :parent Wähler:

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

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

Und so kam es dass der div Elemente hinein <div>some text</div> und <div><span>some text</span></div> wird jedoch jeweils als Elternteil betrachtet <div></div> ist kein Elternteil.

  • Ja, ich denke, diese Antwort ist eleganter als die von S Pangborn. Beide sind jedoch völlig legitim.

    – Kyle Farris

    6. Oktober 09 um 18:58 Uhr

  • @Milo LaMar, ich würde vermuten, dass es keinen großen Leistungsunterschied gibt, aber der einzige Weg, um sicherzugehen, ist, es zu versuchen! Außerdem müssten Sie den Abstand zwischen entfernen #myfav und :parent in Ihrem Beispiel, sonst ist der Selektor nicht derselbe wie meine Antwort.

    – dcharles

    12. Januar 12 um 19:11 Uhr

  • Eine sehr kleine Menge an Lektüre beantwortete mir genug. Genommen von 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

    13. Januar 12 um 02:54 Uhr


  • Leistungstestergebnisse in 0,002s – ich bevorzuge diesen Weg, weil er am besten lesbar ist …

    – Trunkenheit

    1. März 12 um 10:15 Uhr


  • Ich bin verwirrt, ist das nicht die beste Antwort?

    – Andrej Cristian Prodan

    1. Oktober 12 um 13:30 Uhr

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

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

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

und wenn Sie überprüfen möchten, ob div bestimmte Kinder hat (sagen wir <p> benutzen:

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

  • $(...)[0] is undefined Dies kann passieren, wenn #myfav wurde nicht gefunden. Ich würde die Existenz des ersten übereinstimmenden Elements testen, bevor ich diese Bedingung anwende, dh: $('#myfav')[0] && $('#myfav')[0].hasChildNodes().

    – CPHPython

    11. September 18 um 13:19 Uhr

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

}

Der jQuery-Weg

In jQuery können Sie verwenden $('#id').children().length > 0 um zu testen, ob ein Element Kinder 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 Vanilla-JS-Weg

Wenn Sie jQuery nicht verwenden möchten, können Sie verwenden document.getElementById('id').children.length > 0 um zu testen, ob ein Element Kinder 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>

.

620710cookie-checkjquery, ob div id Kinder hat

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy