如何隱藏我列表中的元素並添加「顯示更多」功能？

Question

我正在使用javascript來創建結果列表。我有一個循環遍歷一些數據並創建一個mydata 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個元素，而不是所有其餘的元素。所以每次點擊都會顯示更多元素，直到全部顯示。

Answer 1

您可以使用gt()和lt()選擇與:visible很好這裏一起。

以下將顯示點擊後的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/

不管什麼其他人所提出的建議在這裏，我想不隱藏使用CSS的元素，但這樣做在JS代替，因爲如果用戶有JS禁用，你使用CSS隱藏元素，他不會讓它們可見。但是，如果他禁用JS，他們將永遠不會隱藏，也不會出現該按鈕等等，所以它有一個完整的無腳本回退+搜索引擎不喜歡隱藏的內容（但他們不會知道它的隱藏，如果你在DOM負載上執行）。