เงื่อนไขนี้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 }

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

สิ่งนี้น่าจะใช้ได้ children()ฟังก์ชั่นส่งกลับวัตถุ JQuery ที่มีเด็ก ดังนั้นคุณต้องตรวจสอบขนาดและดูว่ามีลูกอย่างน้อยหนึ่งคนหรือไม่

ตัวอย่างนี้จะพิจารณาว่าองค์ประกอบนั้นมีลูกหรือไม่โดยใช้:parentตัวเลือก:

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

โปรดทราบว่า:parentยังพิจารณาองค์ประกอบที่มีโหนดข้อความอย่างน้อยหนึ่งรายการที่จะเป็นพาเรนต์

ดังนั้นdivองค์ประกอบใน<div>some text</div>และ<div><span>some text</span></div>แต่ละคนจะได้รับการพิจารณาว่าเป็นผู้ปกครอง แต่<div></div>ไม่ใช่ผู้ปกครอง

ตัวเลือกอื่นเพียงเพื่อให้ได้ heck:

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

อาจเร็วที่สุดเนื่องจากใช้เครื่องยนต์ Sizzle อย่างเข้มงวดและไม่จำเป็นต้อง jQuery ใด ๆ เหมือนเดิม อาจจะผิด อย่างไรก็ตามมันใช้งานได้

จริงๆแล้วมันมีวิธีเนทิฟธรรมดาสำหรับสิ่งนี้

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

<div>text</div>ทราบว่านี้ยังรวมถึงโหนดข้อความที่เรียบง่ายดังนั้นมันจะเป็นจริงสำหรับ

และถ้าคุณต้องการตรวจสอบ div มีเด็ก perticular (พูด<p>ใช้:

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

นอกจากนี้คุณยังสามารถตรวจสอบว่า div มีลูกเฉพาะหรือไม่

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

}

วิธี 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 คุณสามารถใช้document.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>