nếu div có nội dung hiển thị div

Question

ok heres những gì tôi có ... nó hoạt động tốt nhưng nó tìm kiếm một từ chứ không phải là nội dung. tôi chỉ muốn nó hiển thị khi có bất kỳ nội dung ..

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

tôi không nghĩ rằng bạn cần html cho điều này

nó trông cho 'sản phẩm' làm thế nào để làm cho nó chỉ tìm kiếm nội dung> 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> 

một giỏ mua hàng xen kẽ để %% panel.upc %% gọi vào thứ gì đó được chèn qua bảng quản trị. trong trường hợp này nếu không có gì .. nó cho thấy là không gian trống trong mã (xem nguồn trong trình duyệt).

Answer 1

Nếu bạn muốn kiểm tra cho văn bản, bạn có thể sử dụng text() phương pháp:

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

Hoặc cho html:

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

Answer 2

Đối với câu hỏi Cập nhật: Kiểm tra văn bản tỉa của bên <div>, như thế này:

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

câu trả lời trước: Nếu bạn muốn hiển thị nếu nó có bất cứ điều gì, sau đó kiểm tra :not() chống lại :empty hoạt động:

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

Nếu bạn muốn kiểm tra bất kỳ eleme nào nts (không thể khoảng trắng duy nhất), sau đó sử dụng :has(*), như thế này:

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

Answer 3

Bạn cũng có thể kiểm tra độ dài của HTML trong bộ chọn của mình:

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

Answer 4

Bạn cũng có thể sử dụng selector CSS3 :empty

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

Bộ chọn :empty chỉ nhắm mục tiêu chỉ phần tử rỗng, không có khoảng trắng.