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，ID为“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。这样做是使用:gt(4)（从0开始）选择器隐藏所有过去5。然后我们使用.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
}

jquery显示/隐藏div和计数器

3 个答案: