Điều kiện này iflà điều khiến tôi gặp rắc rối:

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

Tôi đã thử tất cả những điều sau đây:

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
}

Điều này nên làm việc. Các children()hàm trả về một đối tượng JQuery có chứa các trẻ em. Vì vậy, bạn chỉ cần kiểm tra kích thước và xem nếu nó có ít nhất một con.

Đoạn mã này sẽ xác định xem phần tử có con bằng cách sử dụng :parentbộ chọn không:

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

Lưu ý rằng :parentcũng coi một phần tử có một hoặc nhiều nút văn bản là cha.

Do đó, các divyếu tố trong <div>some text</div>và <div><span>some text</span></div>sẽ được coi là cha mẹ nhưng <div></div>không phải là cha mẹ.

Một lựa chọn khác, chỉ vì cái quái gì đó sẽ là:

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

Có thể thực sự là nhanh nhất vì nó sử dụng nghiêm ngặt công cụ Sizzle và không nhất thiết phải là bất kỳ jQuery nào. Có thể sai mặc dù. Tuy nhiên, nó hoạt động.

Thực sự có một phương pháp riêng đơn giản cho việc này:

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

Lưu ý rằng điều này cũng bao gồm các nút văn bản đơn giản, vì vậy nó sẽ đúng với a <div>text</div>.

và nếu bạn muốn kiểm tra div có con vuông góc không (nói <p>sử dụng:

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

Bạn cũng có thể kiểm tra xem div có con cụ thể hay không,

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

}

Cách jQuery

Trong jQuery, bạn có thể sử dụng $('#id').children().length > 0để kiểm tra xem một phần tử có con hay không.

Bản giới thiệu

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>

Cách vanilla JS

Nếu bạn không muốn sử dụng jQuery, bạn có thể sử dụng document.getElementById('id').children.length > 0để kiểm tra xem một phần tử có con hay không.

Bản giới thiệu

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>