मैं अपनी सूची में तत्वों को कैसे छुपा सकता हूं और 'अधिक दिखाएं' सुविधा जोड़ सकता हूं?

Question

मैं परिणामों की एक सूची बनाने के लिए जावास्क्रिप्ट का उपयोग कर रहा हूं। मेरे पास एक फॉर-लूप है जो कुछ डेटा पर पुनरावृत्त करता है और एक माइडाटा div बनाता है, और परिणाम div को जोड़ता है। यह कुछ इस तरह दिखता नाटक करते हैं:

<div id="results"> 
    <div class="mydata">data 1</div> 
    <div class="mydata">data 2</div> 
    ... 
    <div class="mydata">data 20</div> 
</div> 

मुझे क्या करना चाहते है केवल प्रदर्शन 5 परिणाम एक समय पर, और उपयोगकर्ता और अधिक देखना चाहते हैं चाहिए, वे क्लिक कर सकते हैं एक शो अगले 5 या और अधिक दिखाएं बटन (या कुछ इसी तरह)। कोई विचार?

बस स्पष्ट करने के लिए, जब भी उपयोगकर्ता "अधिक दिखाएं" क्लिक करता है, तो मैं अगले 5 तत्वों को 'अनदेखा' करना चाहता हूं, शेष शेष तत्व नहीं। इसलिए प्रत्येक क्लिक तब तक अधिक तत्वों को प्रकट करता है जब तक सभी प्रदर्शित नहीं होते हैं।

.hiddenData { display: none } 

और divs की किसी भी मात्रा कि की आवश्यक मात्रा से जोड़ने/इस वर्ग को हटाने के लिए संचालकों करने के बाद कि 5.

से अधिक के लिए देते:

Answer 1

"अधिक पढ़ सकते हैं" आप :visible बहुत अच्छी तरह से यहाँ के साथ gt() और lt() चयनकर्ताओं का उपयोग कर सकते हैं।

निम्नलिखित सभी 5 आइटम दिखाई देने पर लिंक पर क्लिक करने और हटाने के अगले 5 परिणाम दिखाए जाएंगे।

$('.mydata:gt(4)').hide().last().after(
    $('<a />').attr('href','#').text('Show more').click(function(){ 
     var a = this; 
     $('.mydata:not(:visible):lt(5)').fadeIn(function(){ 
     if ($('.mydata:not(:visible)').length == 0) $(a).remove(); 
     }); return false; 
    }) 
); 

काम कर उदाहरण: http://jsfiddle.net/niklasvh/nTv7D/

अन्य लोगों को यहाँ क्या सुझाव दे रहे हैं के बावजूद, मैं नहीं सीएसएस का उपयोग कर तत्वों को छिपाने होगा, लेकिन जे एस में यह बजाय करते हैं, क्योंकि एक उपयोगकर्ता जे एस अक्षम है, तो और आप सीएसएस का उपयोग कर तत्वों को छुपाते हैं, वह उन्हें दिखाई नहीं देगा। हालांकि, अगर उसके पास जेएस अक्षम है, तो वे कभी छिपे नहीं होंगे, न ही वह बटन दिखाई देगा, इसलिए इसमें जगह पर एक पूर्ण नोस्क्रिप्ट फॉलबैक है + सर्च इंजन छुपी हुई सामग्री पसंद नहीं करते हैं (लेकिन अगर आप इसे छुपाएंगे तो वे इसे छुपा नहीं पाएंगे इसे डोम लोड पर करें)।