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個元素。