Jquery列表显示/隐藏5项onclick

我有一个列表的jquery问题。 我有一个很大的列表，我想要点击一个链接; 每次显示该列表的下5个项目并隐藏前面的项目。

我怎样才能做到这一点？

 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
10
 
11
 
12
 
13
 
14
 
15 

应该显示Onload：

 1 2 3 4 5 

点击“下一步”时

 6 7 8 9 10 

点击“下一步”时

 11 12 13 14 15 

提前致谢 ！

Answer 1

这是一个选项： http ： //jsfiddle.net/JQq5n/

不知道如何/如果你打算展示以前的项目，所以我把它留了出来

Answer 2

此解决方案更短，并且还可以双向工作（ Previous和Next ）。
小提琴： http ： //jsfiddle.net/JQq5n/61/

 $('ul li:gt(4)').hide(); $('.prev').click(function() { var first = $('ul').children('li:visible:first'); first.prevAll(':lt(5)').show(); first.prev().nextAll().hide() }); $('.next').click(function() { var last = $('ul').children('li:visible:last'); last.nextAll(':lt(5)').show(); last.next().prevAll().hide(); }); 

Answer 3

这是未经测试的代码，但我认为它会让你朝着正确的方向前进……

 var currentShowingSet = 1; $('#next').click(function() { // Hide all. $('ul li').hide(); // increment currently showing set of items. currentShowingSet++; // show the next 5 children of the list. for(var i = 1; i < 6; i++) { $('ul li:nth-child(' + (currentShowingSet * i) + ')').show(); } });