如何當另一個div中的所有div都看不見

Question

我有我的HTML作爲

<div id="main"> 
    <div class="item">String</div> 
    <div class="item">String</div> 
    <div class="item">String</div> 
</div> 

點擊每個.item DIV設置DIV單擊以display: none檢測。如果沒有顯示div，我希望#main div也設置爲display :none。

那麼如何檢測出#main div中的所有div .items都處於使用jQuery的「display：none」模式？

$(document).ready(function() { 
    $('.item').click(function(){ 
     $(this).hide(); 
    }); 
}); 

Answer 1

使用:visible選擇：

if (! $('#main > div:visible').length) { 
    $('#main').hide(); 
} 

Answer 2

你也可以做以下

if(!$('.item').is(':visible')) 
    $('#main').hide();  

下面是一個工作示例：http://jsfiddle.net/mwGeT/