帶分頁的jQuery下拉列表

Question

我有一個下拉列表，如下所示：

問題是：
我只想放3個項目就需要放在javascript中

下拉列表本身基於ul li結構。

所以我當時想的是渲染所有項目，而不是將它們分成ul組，但是我不知道如何在javascript（JQuery） .each(function(){});實現這一點.each(function(){}); 當用戶單擊按鈕底部的箭頭按鈕時，它需要在下拉菜單中顯示后3個元素/（組）。

我希望這里的人對如何實現這一點有一個好主意。

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

Answer 1

首先使用css隱藏所有li（顯示：無；），使用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>