Question

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

示例：prev 1 2 3 4 5 next

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

当我点击prev时，它会像这样

依旧......

<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");

然而，这将包括你的＆＃34; next＆＃34; item，但是使用jQuery，您可以轻松计算li并排除最后一个索引 - 这是读者的练习。

Answer 3

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

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

JsFiddle Demo

如果你想看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

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

4 个答案: