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> 

ロード時は、これを示すべきである：

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