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 开始）选择器。然后我们使用 .delegate() 来提高效率（尽管 < a href="http://api.jquery.com/click/" rel="nofollow">.click() 也可以）。如果没有更多的隐藏，就没有效果。如果有更多隐藏的内容，请淡出我们单击的内容，在淡入淡出的末尾显示 :first :hiddden< /code>一，以及 .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
}