如果div有内容显示div

时间:2010-10-08 18:49:52

标签: jquery animation html

好吧继承人我拥有的......它运作正常,但它寻找的是一个词而不是内容。我只是希望它显示什么时候有任何内容..

 $(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>

它是一个interpire购物车,所以%% panel.upc %%调用通过管理面板插入的东西。在这种情况下,如果没有任何内容..它在代码中显示为空白区域(在浏览器中查看源代码)。

4 个答案:

答案 0 :(得分:62)

如果您想检查文字,可以使用text()方法:

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

或者对于html:

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

答案 1 :(得分:15)

对于更新的问题:检查内部<div>的修剪文本,如下所示:

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

上一个回答:如果您想显示它是否有任何内容,那么针对:not()检查:empty有效:

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

如果要检查任何元素(不仅仅是空格),请使用:has(*),如下所示:

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

答案 2 :(得分:1)

您还可以使用CSS3选择器:empty

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

:empty选择器仅定位空元素,没有空格。

答案 3 :(得分:0)

您还可以检查选择器中HTML的长度:

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