这段代码将使用:parent选择器确定元素是否有子元素:

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

注意:parent也将具有一个或多个文本节点的元素视为父元素。

因此，<div>some text</div>和<div><span>some text</span></div>中的div元素都将被视为父元素，但<div></div>不是父元素。

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

这应该有用。children()函数返回一个包含子对象的JQuery对象。所以你只需要检查它的大小，看看它是否至少有一个子元素。

另一种选择是:

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

实际上可能是最快的，因为它严格使用了Sizzle引擎，而不一定是jQuery。但这可能是错误的。尽管如此，它还是有效的。

实际上有一个非常简单的本地方法:

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

注意，这也包括简单的文本节点，因此对于<div>text</div>也是如此。

如果你想检查div是否有特定的子元素(比如<p>使用:

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

jQuery方式

在jQuery中，您可以使用$('#id').children()。长度> 0用于测试元素是否有子元素。

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>

普通的JS方式

如果你不想使用jQuery，你可以使用document.getElementById('id').children。长度> 0用于测试元素是否有子元素。

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>

你也可以检查div是否有特定的子元素，

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

}