Использование оператора 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();

или .remove (), а не .hide (), как хотите.

К вашему сведению: это, в частности, решение, которое я использую, чтобы скрыть надоедливые пустые ячейки таблицы в 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
}