web-dev-qa-db-ja.com

divにコンテンツshow divがある場合

私が持っているものはここにあります...それはうまく動作しますが、コンテンツではなくWordを探します。コンテンツがあるときに表示したいだけです。

 $(document).ready(function(){
       if ($("#box3:contains('Product')").length) {
          $('#third').show();
       }                                           
    });

このためにHTMLが必要だとは思わない

それは「製品」を探しますどのように私はそれがちょうどコンテンツを探すようにする> 0

<div id="first" class="tab" >
    <div class="tabtxt">
        <a>DETAILS</a>
    </div>
</div>
<div class="tab" id="second">
    <div class="tabtxt">
        <a>INSPIRATION</a>
    </div>
</div>
<div class="tab" id="third" style="display:none">
    <div class="tabtxt">
        <a>NOTES</a>
    </div>
</div>

<div class="boxholder">
    <div style="overflow: hidden; display:block" class="box" id="box1">
        <div style="padding: 10px; line-height:16px">
            %%Panel.ProductDescription%%
        </div>
    </div>
    <div style="overflow: hidden; display:none" class="box" id="box2">
        <div style="padding: 10px; line-height:16px">
            %%Panel.ProductWarranty%%
        </div>
    </div>
    <div style="overflow: hidden; display:none" class="box" id="box3">
        <div style="padding: 10px; line-height:16px">
            %%Panel.UPC%%
        </div>
    </div>
</div>

そのインタラピッドショッピングカートなので、%% panel.upc %%は管理パネルから挿入されたものを呼び出します。この場合、何もない場合は、コード内に空白スペースとして表示されます（ブラウザーでソースを表示）。

jqueryanimationhtml
35
Alex

textを確認する場合は、text()メソッドを使用できます。

 $(document).ready(function(){
   if ($("#box3").text().length > 0) {
     $('#third').show();
   }                                           
 });

またはhtmlの場合：

 $(document).ready(function(){
   if ($("#box3").html().length > 0) {
     $('#third').show();
   }                                           
 });
63
Sarfraz

更新された質問の場合：次のように、内側の_<div>_のトリミングされたテキストを確認します。

_ if ($.trim($("#box3 div").html())) {
   $('#third').show();
 }  
_

前の答え：anythingがあるかどうかを表示したい場合は、 :not() に対する _:empty_ のチェック：

_ if ($("#box3:not(:empty)").length) {
   $('#third').show();
 }  
_

任意の要素（空白だけではない）を確認する場合は、次のように :has(*) を使用します。

_ if ($("#box3:has(*)").length) {
   $('#third').show();
 }  
_
15
Nick Craver

CSS3セレクター:emptyを使用することもできます

div#empty-div:empty {
   display: none;
}

:emptyセレクターは、空白なしで、空の要素のみを対象としています。

1
KKumar

セレクター内でHTMLの長さを確認することもできます。

if ($("#box3").html().length) {
    $('#third').show();
}
0
swilliams