jquery mostrar/ocultar divs y un contador de

Question

tengo una cantidad aleatoria de DIVs (mínimo 1, máximo de 10)

<div id="container"> 
<div class="foo">Content</div> <!-- div 1 --> 
<div class="foo">Content</div> <!-- div 2 --> 
<div class="foo">Content</div> <!-- div 3 --> 
<div class="foo">Content</div> <!-- div 4 --> 
<div class="foo">Content</div> <!-- div 5 --> 
<div class="foo">Content</div> <!-- i need this one hidden --> 
<div class="foo">Content</div> <!-- and this one --> 
</div> 

Quiero los primeros 5 divs para ser visible (ya sea con .show() o con una clase, no importa). Cualquier DIV adicional debe estar oculto.

luego simular el "cierre" de un div con:

$('.foo').click(function(){ 
    $(this).fadeOut('slow');  
}); 

que elimina el div se hace clic, haciendo que todos los divs a continuación para subir un. Este es mi efecto deseado.

Sin embargo, necesito un poco de lógica aquí.

Si tengo menos de 5 DIVS, se debe deshabilitar la instalación cerrada. Si tengo más de 5 DIVs, cuando un div esté "cerrado", quiero que el siguiente div "oculto" se vuelva visible.

puedo añadir identificaciones a cada DIV, si es necesario con identificadores como "foo1" "foo2", etc.

Answer 1

Algo como esto debería funcionar:

$("#container .foo:gt(4)").hide(); 

$("#container").delegate(".foo", "click", function() { 
    if(!$("#container .foo:hidden").length) return; 
    $(this).fadeOut('slow', function() { 
     $(this).siblings(":hidden:first").fadeIn() 
       .end().remove(); 
    }); 
}); 

You can test it out here. Lo que hace es esconder todos los últimos 5 usando el selector :gt(4) (0-based). Entonces estamos usando .delegate() para la eficiencia (aunque un .click() también funcionaría). Si no hay más ocultos, no hay efecto. Si hay son más ocultos, se desvanece el que hicimos clic, al final del desvanecimiento mostrar el :first:hiddden uno, y .remove() el que se desvaneció por completo.

Answer 2

$('.foo').each(
    function(index,element) { 
     if(index>5) $(element).hide(); 
    } 
) 

Answer 3

$('#container div.foo').click(function() { 
    if ($(this).index() >= 5) ...; //etc 
}