jQuery 加载前 3 个元素，单击“加载更多”以显示接下来的 5 个元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17736786/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery load first 3 elements, click "load more" to display next 5 elements
提问by JV10
I have an unordered list:
我有一个无序列表：
<ul id="myList"></ul>
<div id="loadMore">Load more</div>
I wish to populate this list with list items from another HTML file:
我希望用另一个 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>
I want to load the first 3 list items, then show the next 5 items when the user clicks the "load more" div:
我想加载前 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();
});
});
I need help though, as I would like the "load more" to show the next 5 list items, but if there are more list items within the HTML file, to again display the "load more" div and allow users to display the next 5 items, repeating this until the entire list is displayed.
我需要帮助，因为我希望“加载更多”显示接下来的 5 个列表项，但如果 HTML 文件中有更多列表项，再次显示“加载更多”div 并允许用户显示下一个5 项，重复此操作直到显示整个列表。
How can I best achieve this?
我怎样才能最好地实现这一目标？
I have created the following jsfiddle: http://jsfiddle.net/nFd7C/
我创建了以下 jsfiddle：http: //jsfiddle.net/nFd7C/
回答by Tushar Gupta - curioustushar
WARNING: size()was deprecated in jQuery 1.8 and removed in jQuery 3.0, use .lengthinstead
警告：size()在 jQuery 1.8 中被弃用并在 jQuery 3.0 中删除，.length改为使用
Working Demo: http://jsfiddle.net/cse_tushar/6FzSb/
工作演示：http: //jsfiddle.net/cse_tushar/6FzSb/
$(document).ready(function () {
size_li = $("#myList li").size();
x=3;
$('#myList li:lt('+x+')').show();
$('#loadMore').click(function () {
x= (x+5 <= size_li) ? x+5 : size_li;
$('#myList li:lt('+x+')').show();
});
$('#showLess').click(function () {
x=(x-5<0) ? 3 : x-5;
$('#myList li').not(':lt('+x+')').hide();
});
});
New JSto show or hide load more and show less
新 JS显示或隐藏加载更多和显示更少
$(document).ready(function () {
size_li = $("#myList li").size();
x=3;
$('#myList li:lt('+x+')').show();
$('#loadMore').click(function () {
x= (x+5 <= size_li) ? x+5 : size_li;
$('#myList li:lt('+x+')').show();
$('#showLess').show();
if(x == size_li){
$('#loadMore').hide();
}
});
$('#showLess').click(function () {
x=(x-5<0) ? 3 : x-5;
$('#myList li').not(':lt('+x+')').hide();
$('#loadMore').show();
$('#showLess').show();
if(x == 3){
$('#showLess').hide();
}
});
});
CSS
CSS
#showLess {
color:red;
cursor:pointer;
display:none;
}
Working Demo: http://jsfiddle.net/cse_tushar/6FzSb/2/
回答by Optimus Prime
Simple and with little changes. And also hide load more when entire list is loaded.
简单，几乎没有变化。并且在加载整个列表时隐藏更多加载。
jsFiddle here.
jsFiddle在这里。
$(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();
$('#showLess').hide();
var items = 25;
var shown = 3;
$('#loadMore').click(function () {
$('#showLess').show();
shown = $('#myList li:visible').size()+5;
if(shown< items) {$('#myList li:lt('+shown+')').show();}
else {$('#myList li:lt('+items+')').show();
$('#loadMore').hide();
}
});
$('#showLess').click(function () {
$('#myList li').not(':lt(3)').hide();
});
});
回答by Kaiser
The expression $(document).ready(function() deprecated in jQuery3.
jQuery3 中不推荐使用表达式 $(document).ready(function()。
See working fiddle with jQuery 3here
在此处查看使用jQuery 3 的工作
Take into account I didn't include the showless button.
考虑到我没有包含 showless 按钮。
Here's the code:
这是代码：
JS
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
CSS
#myList li{display:none;
}
#loadMore {
color:green;
cursor:pointer;
}
#loadMore:hover {
color:black;
}
