使用jQuery .each（）無限循環遍歷元素

Question

我有一組這樣的元素

<div class="wrap">
    <div class="block active">
        <p>content</p>
    </div>
    <div class="block">
        <p>content</p>
    </div>
    <div class="block">
        <p>content</p>
    </div>
    <div class="block">
        <p>content</p>
    </div>
</div>

我需要一個函數來無限循環這些元素（塊），將活動類從一個移到另一個。 我已經考慮過使用.each（）了，但是我不太了解如何使用它。 任何幫助是極大的贊賞。

Answer 1

我認為您想間隔執行一次，這對您而言很簡單：

 setInterval(function() { var index = $(".block.active").removeClass("active").index(); index = index + 1 >= $(".block").length ? 0 : ++index; $(".block:eq(" + index + ")").addClass("active"); }, 500); 

 div.active { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap"> <div class="block active"> <p>content</p> </div> <div class="block"> <p>content</p> </div> <div class="block"> <p>content</p> </div> <div class="block"> <p>content</p> </div> </div> 

Answer 2

您不必遍歷所有元素。 您只需要執行以下操作：

1. 使用active類獲取元素。
2. 根據操作檢查是否存在下next/previous元素。
3. 如果存在，請從當前元素中刪除活動類，並將其分配給相應的元素。

輪播

樣品小提琴

 $("#btnPrev").on("click", function() { var els = $(".block.active"); if (els.prev() && els.prev().hasClass('block')) { els.removeClass("active").prev().addClass("active"); } }) $("#btnNext").on("click", function() { var els = $(".block.active"); if (els.next() && els.next().hasClass('block')) { els.removeClass("active").next().addClass("active"); } }) 

 .active { background: cyan; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="wrap"> <div class="block active"> <p>content</p> </div> <div class="block"> <p>content</p> </div> <div class="block"> <p>content</p> </div> <div class="block"> <p>content</p> </div> </div> <button id="btnPrev">Prev</button> <button id="btnNext">Next</button> 

股票代號

正如@atul所評論的那樣 ，如果您一直在尋找諸如新聞自動收錄器之類的內容，可以嘗試執行以下操作：

樣品小提琴

 function nextTicker(){ var els = $(".block.active"); els.removeClass("active"); if(els.next() && els.next().hasClass('block')){ els.next().addClass("active"); } else{ $(".block:eq(0)").addClass('active'); } } var interval = setInterval(nextTicker, 1000); // To stop flooding setTimeout(function(){ window.clearInterval(interval) }, 20*1000) 

 .active{ background: cyan; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap"> <div class="block active"> <p>content</p> </div> <div class="block"> <p>content</p> </div> <div class="block"> <p>content</p> </div> <div class="block"> <p>content</p> </div> </div>