[英]Using jQuery .each() to infinitely loop over elements
I have a set of elements like this 我有一组这样的元素
<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>
I need a function to infinitely loop on these elements (block) moving the active class from one to the next. 我需要一个函数来无限循环这些元素(块),将活动类从一个移到另一个。 I've looked at using .each() for this but I don't really understand how to use it.
我已经考虑过使用.each()了,但是我不太了解如何使用它。 Any help is greatly appreciated.
任何帮助是极大的赞赏。
I think you want to do it in an interval, this is pretty easy in your case: 我认为您想间隔执行一次,这对您而言很简单:
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>
You do not have to loop over all elements. 您不必遍历所有元素。 You just have to do following:
您只需要执行以下操作:
active
class. active
类获取元素。 next/previous
element based on action. next/previous
元素。 $("#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>
As commented by @atul , if you are looking for something like a news ticker, which goes on and on, you can try something like this: 正如@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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.