jQuery 显示 5 一次列出一个列表

Question

这已经困扰我好几天了。 。 。所以我有这个布局

<div class='body1'>
    <ul id='list1'>
        <li class='heading'>Name</li>
        <li>Name 1</li>
        <li>Name 2</li>
        <li>Name 3</li>
    </ul>
</div>
<div class='body1'>
    <ul id='list2'>
        <li class='heading'>Name</li>
        <li>Name 1</li>
        <li>Name 2</li>
        <li>Name 3</li>
    </ul>
</div>
<div class='body1'>
    <ul id='list3'>
        <li class='heading'>Name</li>
        <li>Name 1</li>
        <li>Name 2</li>
        <li>Name 3</li>
    </ul>
</div>

这是我的职责

function changePage(){
    var limit = 5; //number of list to show
    var pages = $(".body1");
    var pageul = $(".body1 ul");
    if ($.cookie('pg') == null || $.cookie('pg') >= pages.length){
        $.cookie('pg', 0); // just the cookie to retain current div on display when refresh
    }
    var c = $.cookie('pg');
    $(pages).hide(); // hide all divs
    $(pageul).find('li').hide(); // hide all list inside divs
    $(pages[c]).fadeIn(2000); //fade in the page with index cookie
    $(pages[c]).find('li:lt('+limit+')').fadeIn(2000); //fadein the lists
    c++; //increment
    $.cookie('pg', c); //then store as cookie
    window.setTimeout(changePage, 10000); //run every 10 sec
}

我想做的是以 10 秒的间隔循环显示所有 div，但如果一个 div 的列表多于限制，则通过每 10 秒显示 5(限制)来分割列表，当到达最后一个时继续循环div..

我走在正确的道路上吗？或者我需要采取不同的方法？

我对 jquery 还很陌生，所以请耐心等待

Answer 1

快速调试显示，从 cookie 检索时，c 是一个 String。您不能将其用作 jQuery 对象的索引，您需要先将其解析为整数。所以这一行:

var c = $.cookie('pg');

更改为:

var c = parseInt($.cookie('pg'), 10); // parseInt(string, radix)

_{(基数是您正在使用的数字系统的基数，在本例中为十进制，即基数 10)。}

> <强> updated jsFiddle (我将限制更改为 8 以使其更加清晰)。

_{(我不知道 jQuery 是否支持使用字符串从 jQuery 对象中检索第 n 个元素的方法，但通过 the docs 似乎并非如此)。}