Jquery列表显示/隐藏5项onclick

Question

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

我怎样才能做到这一点？

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>

应该显示Onload:

1
2
3
4
5

点击"下一步"时

6
7
8
9
10

点击"下一步"时

11
12
13
14
15

提前致谢 !

Answer 1

此解决方案更短,并且还可以双向(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 2

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

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