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个div可见(使用.show()或使用类,无所谓).应隐藏任何其他DIV.

然后我用以下方法模拟div的"关闭":

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

删除单击的div,导致下面的所有div向上移动一个.这是我想要的效果.

但是,我需要一些逻辑.

如果我的DIVS小于5,则应禁用关闭设施.如果我有超过5个DIV,那么当div"关闭"时,我希望下一个"隐藏"div可见.

如果需要,我可以为每个DIV添加ID,如"foo1","foo2"等ID.

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();
    });
});

你可以在这里测试一下.这样做是使用:gt(4)(从0开始)选择器隐藏所有过去5 .然后我们正在使用.delegate()效率(虽然它.click()也会起作用).如果没有任何隐藏,则没有效果.如果是比较隐蔽的,淡出了一个我们点击,在以渐弱的结尾展示之一,我们完全淡出的一个.:first :hiddden.remove()