Список Jquery показать / скрыть 5 пунктов по клику

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

Это решение короче, а также работает в двух направлениях (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/

Не знаю, как / если вы планируете показывать предыдущие элементы, поэтому я пропустил это

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