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 () {

    x=3;

    $('#myList li').slice(0, 3).show();

    $('#loadMore').on('click', function (e) {

        e.preventDefault();

        x = x+5;

        $('#myList li').slice(0, x).slideDown();

    });

});

的CSS

#myList li{display:none;

}

#loadMore {

    color:green;

    cursor:pointer;

}

#loadMore:hover {

    color:black;

}