Bu ifdurum bana sıkıntı veren şey:

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

Aşağıdakilerin hepsini denedim:

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

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

Bu çalışmalı. children()Fonksiyon çocukları içeren bir JQuery nesnesi döndürür. Yani sadece boyutu kontrol etmeniz ve en az bir çocuğu olup olmadığını görmeniz gerekiyor.

Bu snippet, öğenin :parentseçiciyi kullanan alt çocukları olup olmadığını belirler :

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

Not :parentaynı zamanda, bir ya da daha fazla metin düğümleri olan bir eleman dikkate alan bir üst olması.

Böylece divelemanlar <div>some text</div>ve <div><span>some text</span></div>her biri bir üst kabul ama olacak <div></div>bir üst değildir.

Başka bir seçenek, sadece bunun için:

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

Kesinlikle Sizzle motorunu kullandığından en hızlı olabilir ve olduğu gibi herhangi bir jQuery değil. Yine de yanlış olabilir. Yine de işe yarıyor.

Bunun için aslında oldukça basit bir yerel yöntem var:

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

Bunun basit metin düğümleri içerdiğini unutmayın, bu nedenle a için geçerli olacaktır <div>text</div>.

ve div'ın pertiküler bir çocuğu olduğunu kontrol etmek istiyorsanız ( <p>kullanın:

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

Div'in belirli çocukları olup olmadığını da kontrol edebilirsiniz,

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

}

JQuery yolu

JQuery'de, $('#id').children().length > 0bir öğenin alt öğesi olup olmadığını test etmek için kullanabilirsiniz .

gösteri

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>

Vanilya JS yolu

JQuery kullanmak istemiyorsanız, document.getElementById('id').children.length > 0bir öğenin alt öğesi olup olmadığını test etmek için kullanabilirsiniz .

gösteri

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>