Javascript 一次显示n个列表元素，jQuery_Javascript_Jquery

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

javascript jquery

Javascript 一次显示n个列表元素，jQuery,javascript,jquery,Javascript,Jquery,我试图将大量的数据以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 Te

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


长列表测试
$（文档）.ready（函数（）{
var元素=$（“#longList li”）；
var指数=0；
var showNextFour=函数（）{
元素。隐藏（）；
var位置=parseInt（索引）+parseInt（4）；
if（位置<元素长度）{
elements.slice（索引，4.show（）；
指数=指数+4；
}否则{
指数=0；
elements.slice（索引，4.show（）；
}
setTimeout（showNextFour，500）；
}
showNextFour（）；
});

一个
两个
三
四
五
六
七
八
九

有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>


$（文档）.ready（函数（）{
myTable=$（'#longList'）。数据表（{
“aaData”：[
/*数据集*/
[“一”]，
[“两个”]，
[“三”]，
[“四”]，
[“五”]，
[“六”]，
[“七”]，
[“八”]
],
“aoColumns”：[
{“缝合”：“项目”}
]
} );   
} );

您不正确地使用了

.slice

。尝试：

elements.slide(index, index+4).show();

但是，这仍然不会显示最后一个元素，因为此时

location

。这里有一个重写，它可以进一步优化您的代码：
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);

.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);
}

var showNextFour=function（）{
元素。隐藏（）；
var位置=指数+4；
if（位置<元素长度）{
elements.slice（index，index+4）.show（）；
指数=指数+4；
}否则{
elements.slice（index，elements.length）.show（）；
指数=0；
}
setTimeout（showNextFour，500）；
}

jQuery的切片方法获取的端点是集合中基于0的位置，而不是相对于开始的位置
如果你解决了这个问题，你就有了工作代码

var元素=$（“#longList li”）；
var指数=0；
var showNextFour=函数（）{
元素。隐藏（）；
var端=指数+4；
如果（结束>元素长度）{
结束=元素长度；
}
if（索引<元素长度）{
elements.slice（index，end.show（）；
指数+=4；
}否则{
指数=0；
elements.slice（索引，4.show（）；
}
setTimeout（showNextFour，500）；
}
showNextFour（）；
为什么要对已经是整数的变量使用parseInt呢？这应该是一条注释。在我编辑答案时，请停止对答案的攻击：-PI绝不会建议为十几行JavaScript中可以完成的事情添加一个相当大的插件，如DataTables。是的，我同意在示例中使用大锤来解决问题，但这取决于他的示例是否简化了。很高兴知道这个插件已经存在，谢谢你提醒我：）又短又甜。谢谢
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();