202

Ten ifwarunek sprawia mi kłopoty:

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

Próbowałem wszystkich następujących czynności:

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

jquery children

— Chris
źródło

440

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

To powinno działać. children()Funkcja zwraca obiekt JQuery zawierający dzieci. Musisz tylko sprawdzić rozmiar i sprawdzić, czy ma co najmniej jedno dziecko.

— S Pangborn
źródło

1

Dziękuję za odpowiedź. To właśnie działało dla mnie. Wiedziałem, że jestem na dobrej drodze z .children (), ale nie wiedziałem, co jest z tym nie tak. Najwyraźniej rozmiar może wynosić 0, co ma sens.

— Chris,

2

Jeśli dodasz selektor do dzieci, możesz również sprawdzić, czy element ma dzieci, które pasują do określonego selektora, na przykład, jeśli chcesz sprawdzić, czy element ma dziecko z określonej klasy.

— Muhd

11

mniejszy problem. nie oznacza nitpick, ale children().lengthpowinien być wywoływany zamiast size () według jQuery docs tutaj: api.jquery.com/size

— Brian Chavez

4

A co, jeśli węzeł zawiera tylko tekst !?

— botenvouwer

1

@sirwilliam Węzeł zwróci długość 0.

— Meki

54

Ten fragment określi, czy element ma dzieci za pomocą :parentselektora:

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

Zauważ, że :parentrównież element z jednym lub więcej węzłami tekstowymi uważa za element nadrzędny.

Zatem divelementy w <div>some text</div>i<div><span>some text</span></div> każdy będzie uważany za rodzica, ale <div></div>nie jest rodzicem.

— Charles
źródło

2

Tak, myślę, że ta odpowiedź jest bardziej elegancka niż odpowiedź S Pangborn. Oba są jednak całkowicie uzasadnione.

— KyleFarris

1

@Milo LaMar, podejrzewam, że nie ma dużej różnicy w wydajności, ale jedynym sposobem, aby się upewnić, jest wypróbowanie! Musiałbyś również usunąć spację między #myfavi :parentw swoim przykładzie, w przeciwnym razie selektor nie będzie taki sam, jak moja odpowiedź.

— dcharles

3

Bardzo mała ilość odpowiedzi wystarczyła mi. Zaczerpnięte z 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

wyniki testu wydajności za 0,002 s - wolę ten sposób, ponieważ najlepiej jest go odczytać ...

— dtrunk

1

Jestem zdezorientowany, czy to nie najlepsza odpowiedź?

— Andrei Cristian Prodan

47

Inną opcją, po prostu do cholery, byłoby:

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

Może faktycznie być najszybszy, ponieważ ściśle wykorzystuje silnik Sizzle, a niekoniecznie jakikolwiek jQuery. Może się mylić. Niemniej jednak działa.

— KyleFarris
źródło

16

Istnieje właściwie dość prosta metoda natywna:

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

Zauważ, że obejmuje to również proste węzły tekstowe, więc będzie to prawdą dla <div>text</div>.

— Szymon
źródło

$(...)[0] is undefinedmoże się to zdarzyć, jeśli #myfavnie zostanie znalezione. Sprawdziłbym istnienie pierwszego dopasowanego elementu przed zastosowaniem tego warunku, tj $('#myfav')[0] && $('#myfav')[0].hasChildNodes(). : .

— CPHPython

13

a jeśli chcesz sprawdzić, div ma okołoporodowe dzieci (powiedz <p>użyj:

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

— suhailvs
źródło

7

Możesz także sprawdzić, czy div ma określone dzieci, czy nie,

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

}

— Rakesh Chaudhari
źródło

4

Sposób jQuery

W jQuery możesz użyć $('#id').children().length > 0do sprawdzenia, czy element ma dzieci.

Próbny

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>

Rozwiń fragment kodu

Waniliowy sposób JS

Jeśli nie chcesz używać jQuery, możesz użyć document.getElementById('id').children.length > 0 do sprawdzenia, czy element ma dzieci.

Próbny

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>

Rozwiń fragment kodu

— John Slegers
źródło

jquery, jeśli div ma dzieci

Sposób jQuery

Próbny

Waniliowy sposób JS

Próbny