jQuery加载前3个元素，单击“加载更多”以显示后5个元素

Question

我有一个无序列表：

<ul id="myList"></ul>

<div id="loadMore">Load more</div>

我希望用另一个HTML文件中的列表项填充此列表：

<li>One</li>

<li>Two</li>

<li>Three</li>

<li>Four</li>

<li>Five</li>

<li>Six</li>

<li>Seven</li>

<li>Eight</li>

<li>Nine</li>

<li>Ten</li>

<li>Eleven</li>

<li>Twelve</li>

<li>Thirteen</li>

<li>Fourteen</li>

<li>Fifteen</li>

我想加载前3个列表项，然后在用户单击“加载更多” div时显示后5个项：

$(document).ready(function () {

    // Load the first 3 list items from another HTML file

    //$('#myList').load('externalList.html li:lt(3)');

    $('#myList li:lt(3)').show();

    $('#loadMore').click(function () {

        $('#myList li:lt(10)').show();

    });

    $('#showLess').click(function () {

        $('#myList li').not(':lt(3)').hide();

    });

});

不过，我需要帮助，因为我希望“加载更多”以显示接下来的5个列表项，但是如果HTML文件中有更多列表项，则再次显示“加载更多”的div并允许用户显示下一个5个项目，重复此操作直到显示整个列表。

我怎样才能最好地做到这一点？

我创建了以下jsfiddle：http : //jsfiddle.net/nFd7C/

Answer 1

表达式$（document）.ready（function（）在jQuery3中已弃用。在这里查看使用jQuery 3的方法考虑到我没有显示按钮。这是代码：JS$(function () {&nbsp; &nbsp; x=3;&nbsp; &nbsp; $('#myList li').slice(0, 3).show();&nbsp; &nbsp; $('#loadMore').on('click', function (e) {&nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; x = x+5;&nbsp; &nbsp; &nbsp; &nbsp; $('#myList li').slice(0, x).slideDown();&nbsp; &nbsp; });});的CSS#myList li{display:none;}#loadMore {&nbsp; &nbsp; color:green;&nbsp; &nbsp; cursor:pointer;}#loadMore:hover {&nbsp; &nbsp; color:black;}