一次显示 n 个列表元素，jQuery答案

【问题标题】：Show n number of list elements at a time, jQuery一次显示 n 个列表元素，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？

标签： javascript jquery

【解决方案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 中完成的工作。
是的，我同意在给出的例子中，它使用大锤敲碎坚果，但这取决于他的例子是否被简化了
很高兴知道这个插件就在那里，谢谢你让我注意到它:)