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

非常快速和肮脏的概念

http://jsfiddle.net/ULnd5/

Answer 2

$(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/