使用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. 如果存在，请从当前元素中删除活动类，并将其分配给相应的元素。

传送带

Sample Fiddle

$("#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评论的那样，如果您正在寻找类似新闻自动收录机的内容，那么您可以尝试以下内容：

Sample Fiddle

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>