Question

我试图将大量数据以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>

Answer 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/

Answer 2

有JQueryUI库可以做到这一点。

例如，Datatables执行与您想要的非常相似的操作，即显示分页数据。使用计时器旋转数据而不是使用分页prev和下一个按钮不会太过分。在超时时，您可以更改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>

Answer 3

.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

Answer 4

jQuery的slice方法结束了它在集合中的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();

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

4 个答案: