ใช้คำสั่ง if เพื่อตรวจสอบว่า div ว่างเปล่าหรือไม่

ฉันกำลังพยายามลบ div เฉพาะหาก div แยกว่างเปล่า นี่คือสิ่งที่ฉันใช้:

$(document).ready(function () {
    if ('#leftmenu:empty') {
        $('#menuTitleWrapper').remove();
        $('#middlemenu').css({ 'right': '0', 'position': 'absolute' });
        $('#PageContent').css({ 'top': '30px', 'position': 'relative' });
    }
});

ฉันคิดว่านี่ใกล้แล้ว แต่ฉันคิดไม่ออกว่าจะเขียนโค้ดเพื่อทดสอบ #leftmenu ได้อย่างไร ขอความช่วยเหลือใด ๆ !

คุณสามารถใช้.is().

if( $('#leftmenu').is(':empty') ) {
    // ...

หรือคุณสามารถทดสอบlengthคุณสมบัติเพื่อดูว่าพบหรือไม่

if( $('#leftmenu:empty').length ) {
    // ...

โปรดทราบว่าการว่างเปล่าหมายถึงไม่มีพื้นที่สีขาวเช่นกัน หากมีโอกาสที่จะมีช่องว่างคุณสามารถใช้$.trim()และตรวจสอบความยาวของเนื้อหาได้

if( !$.trim( $('#leftmenu').html() ).length ) {
    // ...

มันขึ้นอยู่กับสิ่งที่คุณหมายถึงว่างเปล่า

หากต้องการตรวจสอบว่าไม่มีข้อความ (สิ่งนี้อนุญาตให้องค์ประกอบลูกที่ว่างเปล่า):

if ($('#leftmenu').text() == '')

หากต้องการตรวจสอบว่าไม่มีองค์ประกอบลูกหรือข้อความ:

if ($('#leftmenu').contents().length == 0)

หรือ,

if ($('#leftmenu').html() == '')

หากคุณต้องการสาธิตอย่างรวดเร็วว่าคุณตรวจสอบ div ว่างได้อย่างไรฉันขอแนะนำให้คุณลองใช้ลิงก์นี้:

http://html-tuts.com/check-if-html-element-is-empty-or-has-children-tags/

ด้านล่างนี้คุณมีตัวอย่างสั้น ๆ :

ใช้ CSS

หาก div ของคุณว่างเปล่าโดยไม่มีพื้นที่ว่างเลยคุณสามารถใช้ CSS:

.someDiv:empty {
    display: none;
}

น่าเสียดายที่ไม่มีตัวเลือก CSS ที่เลือกองค์ประกอบพี่น้องก่อนหน้านี้ มีเฉพาะสำหรับองค์ประกอบพี่น้องถัดไป:x ~ y

.someDiv:empty ~ .anotherDiv {
    display: none;
}

ใช้ jQuery

การตรวจสอบความยาวข้อความขององค์ประกอบด้วยฟังก์ชัน text ()

if ( $('#leftmenu').text().length == 0 ) {
    // length of text is 0
}

ตรวจสอบว่าองค์ประกอบมีแท็กย่อยอยู่ข้างในหรือไม่

if ( $('#leftmenu').children().length == 0 ) {
    // div has no other tags inside it
}

ตรวจสอบองค์ประกอบว่างหากมีพื้นที่ว่าง

if ( $.trim( $('.someDiv').text() ).length == 0 ) {
    // white-space trimmed, div is empty
}

คุณสามารถขยาย ฟังก์ชันjQuery ได้ดังนี้:

ขยาย:

(function($){
    jQuery.fn.checkEmpty = function() {
       return !$.trim(this.html()).length;
    };
}(jQuery));

ใช้:

<div id="selector"></div>

if($("#selector").checkEmpty()){
     console.log("Empty");
}else{
     console.log("Not Empty");
}

ลองสิ่งนี้:

$(document).ready(function() {
    if ($('#leftmenu').html() === "") {
        $('#menuTitleWrapper').remove();
        $('#middlemenu').css({'right' : '0', 'position' : 'absolute'});
        $('#PageContent').css({'top' : '30px', 'position' : 'relative'});
    }
});

มันไม่ได้สวยที่สุด แต่ควรใช้งานได้ ตรวจสอบว่า innerHTML (เนื้อหาของ #leftmenu) เป็นสตริงว่างหรือไม่ (กล่าวคือไม่มีอะไรอยู่ข้างใน)

ในกรณีของฉันฉันมีหลายองค์ประกอบที่จะซ่อนใน document.ready นี่คือฟังก์ชั่น (ตัวกรอง) ที่ใช้ได้กับฉันจนถึงตอนนี้:

$('[name="_invisibleIfEmpty"]').filter(function () {
    return $.trim($(this).html()).length == 0;
}).hide();

หรือ. ลบ () แทนที่จะเป็น. ซ่อน () อะไรก็ได้ที่คุณต้องการ

FYI: โดยเฉพาะอย่างยิ่งนี่เป็นวิธีแก้ปัญหาที่ฉันใช้เพื่อซ่อนเซลล์ตารางว่างที่น่ารำคาญใน SharePoint (นอกเหนือจากเงื่อนไขนี้ "|| $ (this) .children (" menu "). length"

if (typeof($('#container .prateleira')[0]) === 'undefined') {
    $('#ctl00_Conteudo_ctrPaginaSistemaAreaWrapper').css('display','none');
}

ฉันพบสิ่งนี้ในวันนี้และคำตอบที่ยอมรับไม่ได้ผลสำหรับฉัน นี่คือวิธีที่ฉันทำ

if( $('#div-id *').length === 0 ) {
    // your code here...
}

โซลูชันของฉันตรวจสอบว่ามีองค์ประกอบใด ๆ ใน div หรือไม่ดังนั้นจึงยังคงทำเครื่องหมายว่า div ว่างหากมีเพียงข้อความอยู่ภายใน

คุณยังสามารถใช้สิ่งนี้:

    if (! $('#leftmenu').children().length > 0 ) {
         // do something : e.x : remove a specific div
    }

ฉันคิดว่ามันจะเหมาะกับคุณ!

if($('#leftmenu').val() == "") {
   // statement
}