Using jQuery .each() to infinitely loop over elements

Question

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. Any help is greatly appreciated.

Answer 1

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> 

Answer 2

You do not have to loop over all elements. You just have to do following:

1. Fetch element with active class.
2. Check for existence of next/previous element based on action.
3. If exists, remove active class from current element and assign it to corresponding element.

Carousel

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> 

Ticker

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:

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>