Menggunakan pernyataan if untuk memeriksa apakah div kosong

114

Saya mencoba untuk menghapus div tertentu jika div terpisah kosong. Inilah yang saya gunakan:

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

Saya pikir ini sudah dekat tetapi saya tidak tahu cara menulis kode untuk menguji #leftmenu kosong. Setiap bantuan dihargai!

Mike Muller
sumber

Jawaban:

271

Anda bisa menggunakan .is().

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

Atau Anda bisa menguji lengthproperti untuk melihat apakah ada yang ditemukan.

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

Ingatlah bahwa kosong juga tidak berarti ada ruang putih. Jika ada kemungkinan akan ada ruang kosong, Anda dapat menggunakan $.trim()dan memeriksa panjang konten.

if( !$.trim( $('#leftmenu').html() ).length ) {
    // ...
pengguna113716
sumber
3
trim()bekerja sempurna untuk saya. Harus menghapus kolom di Sharepoint yang menambahkan beberapa spasi, di mana trim()menemukan. Terima kasih.
motoxer4533
1
Seperti di bawah ini, perhatikan bahwa Anda dapat menggunakan .text () jika Anda tidak ingin menghitung HTML tak terlihat acak sebagai konten.
rogueleaderr
@rogueleaderr Cerdas, tidak berpikir tentang menggunakan .text()karena Anda benar-benar bisa memiliki beberapa komentar dalam wadah "kosong" dan dengan demikian tidak trimjuga :emptyakan bekerja. Thx
Juri
Apakah itu solusi yang efisien untuk digunakan .html()Jika penampung memiliki konten HTML yang sangat panjang?
techie_28
37

Itu tergantung apa yang Anda maksud dengan kosong.

Untuk memeriksa apakah tidak ada teks (ini memungkinkan elemen anak yang kosong sendiri):

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

Untuk memeriksa apakah tidak ada elemen anak atau teks:

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

Atau,

if ($('#leftmenu').html() == '')
David Tang
sumber
22

Jika Anda ingin demo cepat bagaimana Anda memeriksa div kosong, saya sarankan Anda untuk mencoba tautan ini:

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


Di bawah ini Anda memiliki beberapa contoh singkat:

Menggunakan CSS

Jika div Anda kosong tanpa apa pun bahkan tanpa spasi, Anda dapat menggunakan CSS:

.someDiv:empty {
    display: none;
}

Sayangnya tidak ada pemilih CSS yang memilih elemen saudara sebelumnya. Hanya ada untuk elemen saudara berikutnya:x ~ y

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

Menggunakan jQuery

Memeriksa panjang teks elemen dengan fungsi text ()

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

Periksa apakah elemen memiliki tag anak di dalamnya

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

Periksa elemen kosong jika mereka memiliki ruang kosong

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

Anda dapat memperluas jQuery fungsionalitas seperti ini:

Perpanjang:

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

Penggunaan:

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

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

Coba ini:

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

Ini bukan yang tercantik, tapi seharusnya berhasil. Ia memeriksa apakah innerHTML (konten #leftmenu) adalah string kosong (yaitu tidak ada apa-apa di dalamnya).

Reid
sumber
2

Dalam kasus saya, saya memiliki beberapa elemen untuk disembunyikan di document.ready. Ini adalah fungsi (filter) yang berfungsi untuk saya sejauh ini:

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

atau .remove () daripada .hide (), apa pun yang Anda inginkan.

FYI: Ini, khususnya, adalah solusi yang saya gunakan untuk menyembunyikan sel tabel kosong yang mengganggu di SharePoint (sebagai tambahan dengan kondisi ini "|| $ (this) .children (" menu "). Length".

Patrik Affentranger
sumber
1
if (typeof($('#container .prateleira')[0]) === 'undefined') {
    $('#ctl00_Conteudo_ctrPaginaSistemaAreaWrapper').css('display','none');
}
Tadeu Luis
sumber
1

Saya mengalami hal ini hari ini dan jawaban yang diterima tidak berhasil untuk saya. Inilah cara saya melakukannya.

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

Solusi saya memeriksa apakah ada elemen di dalam div sehingga masih akan menandai div kosong jika hanya ada teks di dalamnya.

Ricardo Green
sumber
1

Anda juga bisa menggunakan ini:


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

Saya pikir itu akan berhasil untuk Anda!

Zoe_NS
sumber
-2
if($('#leftmenu').val() == "") {
   // statement
}
Sial
sumber