jQuery दिखाएँ/छिपाएँ divs और एक काउंटर

Question

मैं DIVs के एक यादृच्छिक मात्रा में (कम से कम 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 divs दिखाई देना चाहते हैं (या तो .show साथ() या एक वर्ग के साथ, कोई फर्क नहीं पड़ता)। कोई भी अतिरिक्त डीआईवी छुपाया जाना चाहिए।

मैं तो साथ एक div के "समापन" अनुकरण:

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

जो क्लिक किया div निकाल देता है, सभी divs नीचे एक ऊपर ले जाने के कारण। यह मेरा वांछित प्रभाव है।

हालांकि, मुझे यहां कुछ तर्क की आवश्यकता है।

यदि मेरे पास 5 से कम डीआईवीएस है, तो बंद सुविधा को अक्षम किया जाना चाहिए। यदि मेरे पास 5 से अधिक डीवीवी हैं, तो जब एक div "बंद" होता है, तो मैं अगला "छुपा" div दिखाना चाहता हूं।

मैं हर DIV को आईडी जोड़ सकते हैं, तो जैसे "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(); 
    }); 
}); 

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 
}