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

這裏有一個選項： http://jsfiddle.net/JQq5n/

不知道如何/是否你打算顯示以前的項目，所以我已經離開了

Answer 2

這是未經測試的代碼，但我想它會讓你在正確的方向前進..

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(); 
    } 
}); 

Answer 3

該解決方案更短，也可以雙向工作（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(); 
});