JQuery помочь с пейджером и отображением элементов.

Question

У меня есть ul li структура, подобная этой:

<div>
    <a href="#" class="next"></a>
    <a href="#" class="prev"></a>
    <ul>
        <li class="element element1"></li>
        <li class="element element2"></li>
        <li class="element element3"></li>
        <li class="element element1"></li>
        <li class="element element2"></li>
        <li class="element element3"></li>
        <li class="element element1"></li>
        <li class="element element2"></li>
    </ul>
</div>

Изначально я хочу, чтобы при загрузке страницы были видны только первые два li. При щелчке тега привязки .next первые два li должны быть скрыты, а следующие два должны быть видны. Точно так же .previous должен поступить наоборот.

Answer 1

$(function(){

    var cur_el = 1;  

    $('.next, .prev').click(function(event){
        event.preventDefault();
        show_lis($(this).attr('class'));
    });

    function show_lis(dir){

        cur_el = (dir == 'next') ? cur_el + 2 : cur_el - 2;

        if(cur_el >= $('#my_list li').length+1)
        {
            cur_el = 1;
        }
        if(cur_el <= 0)
        {
            cur_el = $('#my_list li').length-1;
        }

        $('#my_list li').hide().siblings(':nth-child('+cur_el+')').show().next().show();
    }
});

Рабочая демоверсия: http://jsfiddle.net/AlienWebguy/kkdrs/

Answer 2

очень быстрая и грязная концепция

http://jsfiddle.net/ULnd5/