每次显示n个列表元素，jQuery
每次显示n个列表元素，jQuery
提问于 2013-11-20 20:00:57
我正在尝试将大量的数据以LI或TR的形式加入到通过电视显示的员工的小屏幕状态中。客户端请求一次显示x行数的能力，以便迭代列表。
例如，如果有12人被列入名单，一次只有4人会出现。0- 4，4-8，8-12等等。如果名单上的人数是奇数，剩下的几个也需要显示--所以可以是4，4，2。
这是我尝试过的-它显示0-4，然后隐藏一切，然后再显示0-4。
<!DOCTYPE html>
<html>
<head>
<title>Long List Test</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var elements = $("#longList li");
var index = 0;
var showNextFour = function() {
elements.hide();
var location = parseInt(index) + parseInt(4);
if (location < elements.length) {
elements.slice(index, 4).show();
index = index + 4;
} else {
index = 0;
elements.slice(index, 4).show();
}
setTimeout(showNextFour, 500);
}
showNextFour();
});
</script>
</head>
<body>
<ul id="longList">
<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>
</ul>
</body>
</html>回答 4
Stack Overflow用户
回答已采纳
发布于 2013-11-20 20:05:52
你使用.slice不正确。尝试：
elements.slide(index, index+4).show();但是，这仍然不会显示最后一个元素，因为此时的location < elements.length。下面是对代码进行更多优化的重写：
var showNextFour = function (index) {
if (index >= elements.length) {
index = 0;
}
elements.hide().slice(index, index+4).show();
setTimeout(function(){ showNextFour(index+4) }, 500);
}
showNextFour(0);http://jsfiddle.net/mblase75/wE4S8/
Stack Overflow用户
发布于 2013-11-20 20:02:51
有一些JQueryUI库可以做到这一点。
例如，数据表所做的事情与您想要的非常相似，即显示分页数据。使用计时器来旋转数据，而不是使用分页prev和next按钮，这并不是太大的牵强。在超时中，您可以更改DataTable iDisplayStart属性，然后调用myTable.fnDraw来更新表。
<script>
$(document).ready(function() {
myTable = $('#longList').dataTable( {
"aaData": [
/* Data set */
[ "One" ],
[ "Two" ],
[ "Three" ],
[ "Four" ],
[ "Five" ],
[ "Six" ],
[ "Seven" ],
[ "Eight" ]
],
"aoColumns": [
{ "sTitle": "Items" }
]
} );
} );
</script>
<body>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="longList">
</table>
</body>Stack Overflow用户
发布于 2013-11-20 20:16:53
.slice接受起始索引和结束索引。
var showNextFour = function() {
elements.hide();
var location = index + 4;
if (location < elements.length) {
elements.slice(index, index + 4).show();
index = index + 4;
} else {
elements.slice(index, elements.length).show();
index = 0;
}
setTimeout(showNextFour, 500);
}链接到小提琴
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20105762
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号