jquery - 如何使用 jquery 使我的无序列表进行分页？

Question

我想知道如何<ul>进行分页？

示例：上一个 1 2 3 4 5 下一个

当我点击下一步时，它会像这样

上一页 2 3 4 5 6 下一页

当我点击 prev 它会像这样

上一页 1 2 3 4 5 下一页

等等...

<ul class="pages">
 <li>Prev</li>
 <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>Next</li>
</ul>

Answer 1

使用 jQuery .nextUntil( )和.prevUntil()

这些链接已经有演示

Answer 2

您可以使用slice，这样：

$(".pages li").slice(5).css("display", "none");

然而，这将包括您的“下一个”项目，但使用 jQuery，您可以轻松计算lis 并排除最后一个索引 - 读者练习。

Answer 3

你也可以使用:gt(n)//n denotes number

$(function (){
     $("li:gt(5)").css("display", "none");
        });​

JsFiddle 演示

如果您想查看 6 到 10 个元素，那么您可以

$(function (){
     $("li:lt(6)").css("display", "none");
        });​

Answer 4

试试我创建的这个 JS 函数：

        function showPage (pageIndex, pageSize) {
            var items = $(".pages > li");
            $(items).hide();

            // Range
            var start = pageIndex * pageSize;
            var end = start + pageSize;

            $(items).slice(start, end).show();

        }

然后调用 showPage(0, 10); // PageNumber=1, PageSize=10