如何重複每（）不刷新頁面

Question

我有下面的標記

<div class="main"> 
    <ul class="ajax-terms"> 
    <li id="app-105">Find Friends</li> 
    <li id="app-107">Buy Tickets,Pay Cover Charges</li> 
    <li id="app-114">Pre-purchase bottle service</li> 
    <li id="app-117">Book VIP Services</li> 
    <li id="app-120">Buy Merchandise</li> 
    <li id="app-122">Toast Friends worldwide</li> 
    <li id="app-125">Notify Services &amp; split the tab</li> 
    </ul> 
</div> 

我想從第一li元素添加一個類myclass一個another.Let的後說，這是第一個li元素加入後，再5秒它將被添加到第二li並且從第一li除去，然後添加到第三li和從第二li然後將其刪除等等。當它到達最後li，應該再次從第一li使得循環繼續重新啓動。

目前我的代碼是這樣的：

$('.main li').each(function(i, el) { 

    setTimeout(function() { 
     $(el).addClass('myclass'); 
    }, i * 3000); 

    setTimeout(function() { 
     $(el).removeClass('myclass'); 

    }, i * 3500); 



}); 

問題，我面對：

1）當到達最後li它不重複。

2）從第二li開始，而不是第一個（可能會有一些延遲問題）

任何幫助將不勝感激。

Answer 1

使用setInterval而不是setTimeout。

var count=0; // flag 
var len = $('.main li').length; // Get the total length of the li to iterate the loop 

    setInterval(function(){ // Execute a function in every 1 sec 
     if(count === len){ 
      count = 0; // Reset the flag to restart the loop 
     } 
     $('.main').find(".myclass").removeClass("myclass"); // Before adding the class, first find it and remove the class 
     $('.main li').eq(count).addClass("myclass"); // eq(count) gives the specific li children where we want the class to be added 
     count++; 
    }, 1000); 

Fiddle

Answer 2

即使@SujataChanda已經使用jQuery給出一個優雅的方法，同樣也可以用簡單的JavaScript來實現。這裏的JavaScript方式旋轉數li要素之間的myclass類，

// get the ids of all the li elements in an array 
var idArray = ["app-105", "app-107", "app-114", "app-117", "app-120", "app-122", "app-125"]; 

// index is used to select particular id from the array 
var index = 0; 

// initially set the class attribute of first li 
document.getElementById(idArray[index]).setAttribute("class", "myclass"); 

// with each rotation if the class attribute of current li element is set then it will 
// remove its class attribute, select the next li element in the sequence 
// and set its class attribute 
function rotation(){ 
    if(document.getElementById(idArray[index]).hasAttribute("class")){ 
     document.getElementById(idArray[index]).removeAttribute("class"); 
     index = (index + 1) % 7; 
     document.getElementById(idArray[index]).setAttribute("class", "myclass"); 
    } 
} 

// call rotation function in every 3 seconds 
var everyInterval = setInterval(rotation, 3000); 

編輯：

// in near future if you're going to add many li elements inside <ul class="ajax-terms"> 
// tag, then you should dynamically loop through each li element to get its id. 
var lis = document.getElementsByClassName("ajax-terms")[0].getElementsByTagName("li"); 
var idArray = []; 
for(var i = 0; i < lis.length; ++i){ 
    idArray[i] = lis[i].id; 
} 

噢，我差點忘了，index計算裏面if塊將是這樣的，

index = (index + 1) % idArray.length;