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();

または.hide（）ではなく.remove（）を使用します。

参考までに、これは特に、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
}