0

例： http： //partnerswealth.advisorproducts.com/home
http://mah.advisorproducts.com/home

要件：

空のときに左右のdivまたはBoxを非表示にします。

以下は私が使用しているHTMLコードです。

<div class="Box secondaryBackground">
<div class="innerBox containerBackground">
<h2> </h2>
<div class="innerBoxContent">
<div class="eNews"> </div>
</div>
</div>
</div>

以下は私が使用しているjsです-そして、 innerBoxContentの子divが空であるそのBoxクラスdivにのみDispNoneクラスを追加しようとしています。

したがって、eNewsのようなinnerBoxContentクラスdivの子が空の場合は、Boxクラスdivにクラスを追加したいだけです。

$(document).ready(function () {
    str = $('.innerBoxContent > div').text();
    if ($.trim(str) === "") {
        $('.innerBox').parent().addClass('DispNone');
    }
    else {
        $('.innerBox').parent().removeClass('DispNone');
    }
});

このコードを変更できますか？

現在、すべてのinnerBox divにクラスを追加していますが、.eNewsのように最後の子要素が空であるdivのみが必要です。ありがとうスシル

4

7 に答える 7

2

次のように要素を通過できるはずです。

$('.innerBoxContent').each(function() {
    var noContent = 0;
    var count = $(this).children().length;
    $(this).children().each(function() {
        if ($(this).html == '') {
            ++noContent;
        }
    });
    if (noContent === count) {
        $(this).hide();
    }
});

上記は、各 innerBoxContent が複数の子を持つことができ、一部は空で、一部は空でない可能性があることを考慮しています。

それはテストされておらず、それを行うためのよりスマートな方法があれば驚くでしょう:)

于 2012-12-14T14:24:06.427 に答える
1

JS を使用する理由 ブラウザーが IE8 の場合、または機能検出 (モダナイザーの推奨など) を使用し、:empty セレクターが定義されていないか使用できないことが判明した場合に、フォールバックに使用します。

CSS には、使用できる:empty 疑似クラスがあります。

この疑似クラスは、子を持たない要素に一致します。要素ノードと空でないテキスト ノードは子と見なされます。空のテキスト ノード、コメント、および処理命令は、子としてカウントされません。データ長がゼロの場合、テキスト ノードは空と見なされます。たとえば、スペースが 1 つだけのテキスト ノードは空ではありません。

したがって、次のようなものがあるとします。

.innerBoxContent:empty {
display: none;
}

そして、あなたは持っていました

<div class="innerBoxContent"></div>

それはうまくいくでしょう。ただし、次の場合:

<div class="innerBoxContent">
  <div class="eNews">
  </div>
</div>

セレクターが機能しません。

于 2012-12-14T14:43:39.040 に答える
0

innerBoxContentの子だけを数えることはできませんか？

if ($('.innerBoxContent > div').length) {
    $('.innerBox').parent().removeClass('DispNone');
} else {
    $('.innerBox').parent().addClass('DispNone');
}
于 2012-12-14T14:13:37.850 に答える
0

私は次のようなことを言うでしょう

$('.innerBoxContent > div').each(function() {
                                      if( this.html() == "" ) {
                                         this.parent().hide();
                                      }
                            });
于 2012-12-14T14:18:15.573 に答える
0

toggle()関数を使用する必要があります。

   $(document).ready(function () {
        str = $('.innerBoxContent > div').text();
        if ($.trim(str) === "") {
            $('.innerBox').parent().toggle();
        }

    });
于 2012-12-14T14:18:23.373 に答える
0

のコンテンツinnerBoxContentが存在し、何らかのアクションによってそのセクションからコンテンツが削除された場合は、そのイベントで表示/非表示を行う必要があり、すべてのイベントで実行されるイベントを起動しようとしないでください。

コンテンツがサーバーからのみ読み込まれる場合は、その時点でクラスを適用するだけで、最初の表示スタイルを JavaScript に依存する必要はありません。

多くの結果が JavaScript に役立ちますが、コンテンツを追加および削除する方法は、スクリプトを配置する必要がある場所です。

コンテンツを変更するイベントに表示/非表示を連鎖させる代わりに、イベント エミッターを設定し、代わりにイベント システムを介してコードを接続することができます。

于 2012-12-14T14:27:29.500 に答える
0 
$(".eNews").each(function(index, element){
    if($(element).html() == ""){
        $(element).parent().hide();
    }
)};
于 2012-12-14T14:16:34.223 に答える