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。

我在正确的轨道上吗？或者我需要一个不同的方法？

IM相当新的jQuery的所以请多多包涵

Answer 1

现在工作，傻我所有我需要的是调用window.setTimeout（changePage，10000）; after clearInterval大声笑..

<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> 
     <li>Name 4</li> 
     <li>Name 5</li> 
     <li>Name 6</li> 
     <li>Name 7</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 = 6; //number of list to show 
    var pages = $(".body1"); 
    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 
    $(pages).find('li').hide(); // hide all list inside divs 
    $(pages[c]).fadeIn(2000); //fade in the page with index cookie 
    if($(pages[c]).find("ul li:not(.heading)").length > limit){ 
     $(pages).find('li:lt('+(limit+1)+')').fadeIn(2000); 
     var grpli = Math.ceil($(pages[c]).find("ul li:not(.heading)").length/limit); 
     var timesRun = 0; 
     var interval = setInterval(function(){ 
      timesRun += 1; //increment 
      gt = (limit*(timesRun+1))-5; 
      if(timesRun === grpli-1){clearInterval(interval); window.setTimeout(changePage, 10000);}else{window.clearTimeout(timer);} // fixed by calling setTime out again 
      $(pages).find('li:not(.heading)').hide(); //hide all lists again 
      $(pages).find('li:gt('+gt+'):lt('+gt+')').fadeIn(2000); //show 5 lists between gt and lt 
     }, 10000); 
    }else{ 
     $(pages[c]).find('li:lt('+limit+')').fadeIn(2000); 
    } 
    c++; //increment 
    $.cookie('pg', c); //then store as cookie 
    var timer = window.setTimeout(changePage, 10000); //run every 10 sec 
} 
changePage(); 

Answer 2

快速调试表明c是String从cookie中检索时。你不能用它作为jQuery对象的索引，你首先需要将它解析为一个整数。所以这条线：

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

变为：

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

_{（基数是你又名基地10个工作中，在这种情况下十进制数字系统的基础）。}

> updated jsFiddle（我改变了限制8，使其更清晰）。我不知道jQuery是否支持一种方式来从一个字符串，但通过the docs似乎并不是这样的情况下从jQuery对象中检索第n个元素。