如何检测另一个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。

那么如何使用jQuery检测.items div中的所有div #main是否处于'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/