jquery - jquery如果div id有孩子

Question

这种if情况给我带来了麻烦：

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

我尝试了以下所有方法：

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

Answer 1

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

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

Answer 2

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

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

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

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

Answer 3

另一种选择，只是为了它会是：

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

实际上可能是最快的，因为它严格使用 Sizzle 引擎，而不一定是任何 jQuery。虽然可能是错的。尽管如此，它仍然有效。

Answer 4

实际上有一个非常简单的本机方法：

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

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

Answer 5

如果你想检查 div 有一个特殊的孩子（比如<p>使用：

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

Answer 6

您还可以检查 div 是否有特定的孩子，

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

}

Answer 7

jQuery 方式

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

演示

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，你可以使用 jQuerydocument.getElementById('id').children.length > 0来测试一个元素是否有子元素。

演示

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>