jQuery加载前3个元素，单击"；“加载更多”；显示下5个元素的步骤

我有一份无序的清单：

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

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

我如何才能最好地实现这一点

---

我创建了以下JSFIDLE:

警告：

size（）

在jQuery 1.8中被弃用，在jQuery 3.0中被删除，请改用

.length

工作演示：

---

工作演示：

简单且变化不大。并且在加载整个列表时隐藏加载更多

jsFiddle

$（文档）.ready（函数（）{
//从另一个HTML文件加载前3个列表项
//$（'#myList'）.load（'externalList.html li:lt（3）'）；
$（'#myList li:lt（3）'）.show（）；
$（'#showLess'）.hide（）；
风险值项目=25；
var=3；
$（“#加载更多”）。单击（函数（）{
$（'#showLess'）.show（）；
显示=$（'#myList li:visible'）。大小（）+5；
if（show

表达式$（document）.ready（function（）在jQuery3中已被弃用

请参见使用jQuery 3进行工作

考虑到我没有包括无显示按钮

代码如下：

JS

#showLess {
    color:red;
    cursor:pointer;
    display:none;
}

$(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();
    });
});

#myList li{display:none;
}
#loadMore {
    color:green;
    cursor:pointer;
}
#loadMore:hover {
    color:black;
}

CSS

#showLess {
    color:red;
    cursor:pointer;
    display:none;
}

$(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();
    });
});

#myList li{display:none;
}
#loadMore {
    color:green;
    cursor:pointer;
}
#loadMore:hover {
    color:black;
}

---

加载（）将使用$.get加载整个文件，然后在客户端进行筛选，因此您应该加载整个文件并自己进行筛选，而不是反复加载相同的内容@adeneo我刚刚进行了编辑，以显示接下来的5个列表项，而不是加载。太好了@tushar gupta，我将如何实现此wi我的加载列表？我如何隐藏“加载更多”一旦显示了整个列表？这很好@tushar gupta，但是如何首先用此脚本加载externalList.html文件？在页面中包含外部html文件此脚本对everyone@TusharGupta我们可以用它作为特定类的子div吗。abc在最外层的div中，id为#mylist请帮助我，我喜欢e隐藏“显示更多”的功能当没有更多的东西要显示时链接。它看起来更整洁。你的小提琴有一个问题，比如，先加载更多的东西，然后显示更少的东西。然后加载更多的东西是不可见的。我已经为你的小提琴分叉了，这是一个有效的方法：嗨，我如何调整这个JS，比如说3个不同的块？：-/我尝试了添加不同的ID，但没有运气。有什么建议吗？：）我们可以像子div一样使用它吗？在id为mylist的最外层div中有特定类请帮助我@OptimusPrime这里是新的js fiddle，我想显示前三个图像，然后在单击load more后添加两个

$(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();
    });
});

#myList li{display:none;
}
#loadMore {
    color:green;
    cursor:pointer;
}
#loadMore:hover {
    color:black;
}