一次显示 n 个列表元素，jQuery
Posted
技术标签:
【中文标题】一次显示 n 个列表元素，jQuery【英文标题】：Show n number of list elements at a time, jQuery 【发布时间】：2013-12-05 00:36:34 【问题描述】：我正在尝试将 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>
【问题讨论】：
你为什么对已经是整数的变量使用parseInt？
【参考方案1】：
您错误地使用了.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/
【讨论】：
又短又甜。谢谢！【参考方案2】：.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);
Link to fiddle
【讨论】：
【参考方案3】：jQuery 的 slice 方法的 end 是它在集合中从 0 开始的位置，而不是它相对于 start 的位置。
如果你解决了这个问题，你就有了工作代码。
http://jsfiddle.net/UCSJL/1/
var elements = $("#longList li");
var index = 0;
var showNextFour = function()
elements.hide();
var end = index + 4;
if (end > elements.length)
end = elements.length;
if (index < elements.length)
elements.slice(index, end).show();
index += 4;
else
index = 0;
elements.slice(index, 4).show();
setTimeout(showNextFour, 500);
showNextFour();
【讨论】：
【参考方案4】：有执行此操作的 JQueryUI 库。
例如，Datatables 所做的事情与您想要的非常相似，即显示分页数据。使用计时器来旋转数据而不是使用分页 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>
【讨论】：
应该是评论。 在我编辑答案的时候不要急于求成。 :-P 我绝不会建议添加一个像 DataTables 这样相当大的插件来完成可以在十几行 JavaScript 中完成的工作。 是的，我同意在给出的例子中，它使用大锤敲碎坚果，但这取决于他的例子是否被简化了 很高兴知道这个插件就在那里，谢谢你让我注意到它:)以上是关于一次显示 n 个列表元素，jQuery的主要内容，如果未能解决你的问题，请参考以下文章
使用多个Jquery的$.ajax()请求服务器获取新闻列表
使用 JQuery 从列表中删除除前 N 个元素之外的所有元素