Використання оператора 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() == '')

Якщо ви хочете отримати швидку демонстрацію того, як ви перевіряєте порожні діви, я б запропонував вам спробувати це посилання:

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'});
    }
});

Це не найкрасивіше, але це має працювати. Він перевіряє, чи внутрішнійHTML (вміст #leftmenu) є порожнім рядком (тобто всередині нього немає нічого).

У моєму випадку у мене було декілька елементів, які можна приховати на document.ready. Це функція (фільтр), яка працювала для мене досі:

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

або .remove (), а не .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
}