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

Question

У меня есть случайное количество DIV (минимум 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, по которому щелкнули, и все приведенные ниже 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();
    });
});

Вы можете проверить это здесь . Это скрывает все последние 5 с помощью селектора :gt(4) (на основе 0). Затем мы используем .delegate() для эффективности (хотя .click() тоже будет работать). Если больше нет скрытых, нет никакого эффекта. Если скрыто на больше, исчезните тот, который мы щелкнули, в конце исчезновения покажите :first :hiddden один и .remove() тот, который мы полностью исчезли.

Answer 2

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

Answer 3

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