Użycie instrukcji if do sprawdzenia, czy element div jest pusty

Próbuję usunąć określony element div, jeśli oddzielny element div jest pusty. Oto czego używam:

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

Myślę, że to już blisko, ale nie mogę dowiedzieć się, jak napisać kod do przetestowania #leftmenu jest puste. Każda pomoc jest mile widziana!

Możesz użyć .is().

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

Możesz też po prostu przetestować lengthwłaściwość, aby sprawdzić, czy została znaleziona.

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

Pamiętaj, że puste oznacza również brak spacji. Jeśli istnieje szansa, że ​​będzie spacja, możesz użyć $.trim()i sprawdzić długość treści.

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

Zależy, co masz na myśli mówiąc „pusty”.

Aby sprawdzić, czy nie ma tekstu (pozwala to na elementy podrzędne, które same są puste):

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

Aby sprawdzić, czy nie ma elementów podrzędnych ani tekstu:

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

Lub,

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

Jeśli chcesz szybko zobaczyć, jak sprawdzać puste elementy div, sugeruję wypróbowanie tego linku:

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

Poniżej kilka krótkich przykładów:

Korzystanie z CSS

Jeśli twój div jest pusty bez niczego, nawet bez spacji, możesz użyć CSS:

.someDiv:empty {
    display: none;
}

Niestety nie ma selektora CSS, który wybierałby poprzedni element siostrzany. Jest tylko dla następnego elementu rodzeństwa:x ~ y

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

Korzystanie z jQuery

Sprawdzanie długości tekstu elementu funkcją text ()

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

Sprawdź, czy element zawiera jakieś tagi podrzędne

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

Sprawdź puste elementy, jeśli mają spacje

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

Możesz rozszerzyć jQuery funkcjonalność następujący sposób:

Poszerzać :

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

Posługiwać się :

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

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

Spróbuj tego:

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

Nie jest najładniejsza, ale powinna działać. Sprawdza, czy innerHTML (zawartość #leftmenu) jest pustym łańcuchem (tj. Nie ma w nim nic).

W moim przypadku miałem wiele elementów do ukrycia na document.ready. To jest funkcja (filtr), która do tej pory działała u mnie:

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

lub .remove () zamiast .hide (), cokolwiek wolisz.

FYI: W szczególności jest to rozwiązanie, którego używam do ukrywania irytujących pustych komórek tabeli w programie SharePoint (dodatkowo z warunkiem „|| $ (this) .children („ menu ”). Length”.

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

Spotkałem się z tym dzisiaj i przyjęte odpowiedzi nie działają dla mnie. Oto jak to zrobiłem.

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

Moje rozwiązanie sprawdza, czy w elemencie div są jakieś elementy, więc nadal oznaczałoby element div jako pusty, jeśli jest w nim tylko tekst.

również możesz tego użyć:

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

Myślę, że to zadziała!

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