jquery show/hide divs và một bộ đếm

Question

tôi có một số lượng ngẫu nhiên của DIV (tối thiểu 1, tối đa là 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> 

Tôi muốn 5 divs đầu tiên được nhìn thấy (hoặc với .show() hoặc với một lớp học, không quan trọng). Bất kỳ DIV bổ sung nào cũng sẽ bị ẩn.

tôi sau đó mô phỏng các "đóng cửa" của một div với:

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

mà loại bỏ các div nhấn vào, khiến cho tất cả các divs dưới đây để di chuyển lên một. Đây là hiệu ứng mong muốn của tôi.

Tuy nhiên, tôi cần một số logic ở đây.

Nếu tôi có ít hơn 5 DIVS, cơ sở đóng sẽ bị vô hiệu hóa. Nếu tôi có nhiều hơn 5 DIV, thì khi div được "đóng", tôi muốn div "ẩn" tiếp theo hiển thị.

tôi có thể thêm ID cho mỗi DIV nếu được yêu cầu với ID như "foo1" "foo2" vv

Answer 1

Something như thế này nên làm việc:

$("#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. Điều này làm ẩn tất cả 5 bằng cách sử dụng bộ chọn :gt(4) (dựa trên 0). Sau đó, chúng tôi đang sử dụng .delegate() để có hiệu quả (mặc dù .click() cũng sẽ hoạt động). Nếu không còn ẩn nữa, không có hiệu lực. Nếu có là ẩn hơn, làm mờ dần hình ảnh chúng tôi đã nhấp vào, ở cuối mờ dần, hãy hiển thị số :first:hiddden một và .remove() thứ chúng tôi đã xóa hoàn toàn.

Answer 2

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

Answer 3

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