JQuery показать/скрыть дивы и счетчик

Question

У меня есть случайное количество DIVs (минимум 1, максимум 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> 

Хочу первые 5 дивы, чтобы быть видимыми (либо с .Show() или с классом, не имеет значения). Любые дополнительные DIV должны быть скрыты.

Затем я имитировать «закрывание» в DIV с:

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

который удаляет щелкнул DIV, в результате чего все дивы ниже, чтобы двигаться вверх один. Это мой желаемый эффект.

Однако мне нужна логика здесь.

Если у меня меньше 5 DIVS, закрытие объекта должно быть отключено. Если у меня больше 5 DIV, тогда, когда div «закрыт», я хочу, чтобы следующий «скрытый» div стал видимым.

Я могу добавить идентификаторы каждого DIV при необходимости с идентификаторами, как "Foo1" "foo2" и т.д.

Answer 1

Что-то, как это должно работать:

$("#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. То, что это делает, скрывает все последние 5, используя селектор :gt(4) (0). Затем мы используем .delegate() для эффективности (хотя .click() тоже будет работать). Если нет более скрытых, нет никакого эффекта. Если там больше скрыты, исчезните, мы нажали, на конце выцветания покажите :first:hiddden один, а .remove() тот, который мы полностью погасли.

Answer 2

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

Answer 3

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