Cómo detectar cuando todos los divs dentro de otro div son invisibles

Question

tengo a mi HTML como

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

Al hacer clic en cada .item div div establece el clic a display: none. Cuando no se muestran divs, quiero que el #main div se establezca también en display :none.

Entonces, ¿cómo puedo detectar que todos los div .items dentro del div #main están en modo 'display: none` usando jQuery?

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

Answer 1

Utilice la :visible selector:

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

Answer 2

También puede hacer lo siguiente

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

Aquí está un ejemplo de trabajo: http://jsfiddle.net/mwGeT/