0

jQueryに関してはかなり初心者なので、よろしくお願いします:)

幅と高さが設定されているdivの場合、ブラウザーに何も表示されていないときにこれらのコンテナーを非表示にする(set display:none;)方法を探しています。多くの場合、サブコンポーネントが空/ display:none;であるかどうかをチェックする必要があるため、HTMLがネストされていて、少し複雑になっている場合はそうではありません。

これまでで最も近いのは、.text()メソッドを使用し、空白を削除して長さを確認することです。ただし、.text()はスタイルを無視し、非表示のテキストも取得します。また、.text()は戻り値を返さないため、フィルタリングが困難です。

これが私が遊んでいるフィドルです:http://jsfiddle.net/JbBkQ/5/ 「HiddenContent」を含むdivが最初のjQuery関数によってキャッチされるようにしたいと思います。

非表示のコンテンツは囲まれており、表示はなしに設定されています。

それは理にかなっていますか?

4

2 に答える 2

1

探しているdivを選択して繰り返し処理し、表示されているかどうかに基づいて子コレクションをフィルタリングします。子が表示されていない場合は、要素自体を非表示にします。

$("div").each(function(){
   if(!this.children().find(":visible").length){
       this.hide();
   }
}

選択しているdivが相互にネストできる場合、これは正しく機能しません(選択の順序によっては、非表示になっている別のdivを持つdivがそれ自体で非表示にならない場合があります)

編集

1レベルだけ下げたい場合は、検索の代わりにフィルターを使用できます

$("div").each(function(){
     if(!this.children().filter(":visible").length){
         this.hide();
     }
}
于 2012-06-05T15:58:44.947 に答える
0

あなたが正しいことを理解しているなら、あなたは:empty疑似クラスを使うことを試みることができます

オンラインデモ

div:empty {
    display: none;
}
于 2012-06-05T15:52:09.997 に答える