Javascript Ul开始时仅显示前10个li，然后单击下一个显示10-20，然后显示20-30

我希望页面只显示特定

ul

中的前10个

li

。在css中： ul#asd li{ 显示：无 } ul#asd li:第n个孩子（2）{ 显示：块 } ul#asd li:第n个孩子（3）{ 显示：块 }

这就足够了。但我希望它在单击“下一步”按钮时按顺序显示下一个10。 所以，在开始时显示前10个，当“下一步”按钮单击“显示第10到第20个

s”时，就是这样。如果可以通过输入字段命令该功能输入页码和两个按钮“下一个”“上一个”，这将是完美的解决方案。我想知道是否有代码强制页面只加载可见内容。谢谢你的回答

 <ul id="asd">
    <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>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
 </ul>

 <button id="prev" onSubmit="">prev</button>
 <input id="page" onSubmit="" />
 <button id="more" onSubmit="">next</button>
 </div>

 <script>
 function showPage(page) {
 var listItems = $("#asd li").toArray();
 var start = (10 * page) - 10; // this is if you use page 1
 // var start = (10 * page) // this is if you use page 0
 var showListItems = listItems.splice(start, 10);

 $(listItems).hide();
 $(showListItems).show();
 }</script>


一,
二,
三,
四,
五,
六,
七,
八,
九,
十,
十一,
十二,
十三,
十四,
十五
十六,

上
下一个
功能显示页（第页）{
var listItems=$（“#asd li”）.toArray（）；
var start=（10*page）-10；//如果使用第1页，则为
//var start=（10*page）//如果使用第0页，则为
var showListItems=listItems.splice（开始，10）；
$（listItems.hide（）；
$（showListItems.show（）；
}

现在的问题是，我仍然需要使用CSS来进行格式化，所以我不能调用这个函数

我也发现了，但它对我没有用处；它在到达最后一页后继续运行
 您可以编写一个函数来拼接列表项：

function showPage(page) {
    var listItems = $("#asd li").toArray();
    var start = (10 * page) - 10; // this is if you use page 1
    // var start = (10 * page) // this is if you use page 0
    var showListItems = listItems.splice(start, 10);

    $(listItems).hide();
    $(showListItems).show();
}

如果您正在跟踪当前页码，则可以使用“下一步”按钮增加页面，然后调用showPage（第页）。您也可以将其用于上一页，或跳到上一页

这是一本书。这还不完整，因为当没有下一个/上一个按钮时，您需要添加禁用按钮的逻辑，以及处理跳转到不存在的页面的逻辑。
很高兴看到您的方法…我编辑了我的帖子。我真的不能让它工作。我想我调用函数是错误的。对于隐藏的li项，我还需要使用css吗？@user3321234您根本没有从编辑中调用该函数。您需要在按钮中添加一个
type=“button”
。您还需要对按钮使用onclick方法。我会更新我的答案。