2012-07-02 33 views
6

Tôi đã xem xét và tìm thấy rất nhiều câu hỏi về điều này, nhưng không có giải pháp nào phù hợp với tôi. Tôi có cấu trúc như sau:jQuery Ẩn div cha nếu div con trống rỗng

<div class="pricetag"> 
    <div class="price">400</div> 
</div> 

<div class="pricetag"> 
    <div class="price"></div> 
</div> 

<div class="pricetag"> 
    <div class="price">250</div> 
</div> 

Điều tôi muốn làm là ẩn .pricetag nơi .price không chứa bất kỳ thứ gì. Nó có thể được rất nhiều khác nhau .pricetag của trên cùng một trang nhưng tôi chỉ muốn ẩn những người có sản phẩm nào.

Điều này có thể thực hiện được với jQuery không? Tôi đã thử rất nhiều kịch bản khác nhau nhưng không có kịch bản nào hoạt động đúng.

+0

sẽ từng 'yếu tố .pricetag' chỉ bao giờ có một' yếu tố .price'? –

+0

Tôi chèn fr. trong đầu và: - ở cuối mỗi .pricetag. Vì vậy, nếu .price có nội dung là

fr.
200
: -
. Nếu .price trống thì nó là
fr.
: -
Daniel

+0

Nhưng bạn sẽ không bao giờ có '

fr.
200
: -
', phải không? –

Trả lời

17

Bạn có thể sử dụng :empty selector và parent phương pháp, giả định các yếu tố .price trống sẽ không bao giờ chứa bất kỳ nút văn bản (ví dụ một ký tự dòng mới):

$(".price:empty").parent().hide(); 

Dưới đây là một working example.

+0

Điều này đã sửa nó! Cảm ơn nhiều! Tôi đã chỉ cố gắng sử dụng nếu các câu lệnh để kiểm tra xem div có trống không. Cảm ơn một lần nữa. Tôi sẽ đánh dấu câu trả lời này ngay sau khi tôi được phép làm điều đó :) – Daniel

+0

@DanielLundahl - Bạn được chào đón, vui vì tôi có thể giúp :) –

+0

Cách thông minh để làm điều đó. Tôi đã không biết về bộ chọn ': empty'. Cảm ơn –

1
$('.price').each(function(){ 
    if ($(this).text().length == 0) { 
    $(this).parent().hide() 
    } 
}) 
1

bản demo làm việchttp://jsfiddle.net/mm4pX/1/

Bạn có thể sử dụng để kiểm tra xem .is(':empty') div là rỗng và sau đó làm cho cha mẹ div ẩn.

Hope this helps,

đang

$('.price').each(function() { 
    if $('.price').is(':empty') $(this).parent().hide() 
});​ 
+0

Không cần phải lặp qua tất cả các '.yếu tố price'. Các phương thức 'parent' và' hide' áp dụng cho tất cả các phần tử trong tập hợp phù hợp. –

+0

@ JamesAllardice Aha thank-you ':)' Tôi đã thực sự đọc bài viết ở trên, mát mẻ, cổ vũ cho điều đó! –

0

mã jquery này sẽ làm điều đó

$(function(){ 
    $(".price").each(function(){ 
    if($(this).html()=="") 
     $(this).parent(".pricetag").hide(); 
    }); 
}); 

jsbin dụ: http://jsbin.com/ovagus

0

thử kịch bản jQuery này

0.123.
$(document).ready(function(e) 
{ 
    $('div.pricetag').each(function(key, value) 
    { 
     if(!$('div.price', value).html()) $(value).hide(); 
    }); 
}); 
0

Bộ chọn :empty không chọn phần tử nếu nó chứa khoảng trắng. Nếu đó là một vấn đề thì bạn có thể cắt các phần tử từ khoảng trắng:

function isEmpty(element){ 
    return !$.trim(element.html()) 
} 

$(".box").each(function() { 
    var box = $(this); 
    var body = box.find(".box-body"); 

    if(isEmpty(body)) { 
    console.log("EMPTY"); 
    box.hide(); 
    } 
}); 

http://codepen.io/DanAndreasson/pen/jWpLgM

Các vấn đề liên quan