使用Paging的JQuery下拉列表

Question

我的下拉数字如下：

问题是：
我只需要3个项目，它需要在javascript

下拉列表本身基于ul li结构。

所以我想的是渲染所有项目而不是将它们分成几组 但我不知道如何在javascript（JQuery）.each(function(){});中实现这一点 当用户点击按钮上的箭头按钮时，它需要在下拉列表中显示第二个3个元素/（组）。

我希望有人知道如何实现这一目标。

http://jsfiddle.net/9pBgZ/18/

Answer 1

首先用css隐藏所有的li（display：none;）使用jQuery slice（就像你说的那样），然后根据你所在的页面显示你想要显示的元素：

$( "li" ).slice( 0, 2).show();

或

$( "li" ).slice( 3, 5).show();

您还可以查看jQuery get功能。

您可以按索引获取项目：

$( "li" ).get( 0 )

您可以使用普通for或foreach循环，然后根据当前所选的选项卡仅选择要显示的项目。

解决方案（感谢FWieP）

<script type="text/javascript">
    var PageNumber = 0;
    var PageSize = 3;

    $(document).ready(function(){
        Paging();

    $("#Back").click(function(){
        PageNumber = PageNumber -1;
        console.log(PageNumber);
        Paging();
    });

    $("#Forward").click(function(){
        PageNumber = PageNumber +1;
        console.log(PageNumber);
        Paging();
    });
});

    function Paging()
    {
       $("#ListItems li").hide();
    var lis = $('#ListItems li').slice(PageNumber*PageSize, (PageNumber*PageSize)+PageSize);
    $(lis).show();
    }


</script>

<div class="Dropdown"> 

<ul id="ListItems">
     <li><a href="#">Item 1</a></li>
     <li><a href="#">Item 2</a></li>
     <li><a href="#">Item 3</a></li>
     <li><a href="#">Item 4</a></li>
     <li><a href="#">Item 5</a></li>
     <li><a href="#">Item 6</a></li>
     <li><a href="#">Item 7</a></li>
</ul>

 <div class="PagingButtons" id="pnlPaging">
   <a class="Back" href="#" id="Back">&lt;</a>
   <a class="Forward" href="#" id="Forward">&gt;</a>
 </div>

</div>