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.

And when should this action happen? a button click or something? — Rajesh Dixit
– Rajesh Dixit, Commented Aug 5, 2016 at 11:08
as suggested by @madalin slider is a good option, you can also run a setInterval and in the callback method find the next sibling and toggle the class on both current active block and its sibling — user2385619
– user2385619, Commented Aug 5, 2016 at 11:16

eisbehr · Accepted Answer · 2016-08-05 11:14:27Z

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>

edited Aug 5, 2016 at 11:14

answered Aug 5, 2016 at 11:09

eisbehr

12.5k8 gold badges42 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rajesh Dixit Over a year ago

You can use ++index% blockLength instead.

Community · Accepted Answer · 2017-05-23 12:06:43Z

0

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

Fetch element with active class.
Check for existence of next/previous element based on action.
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>

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Aug 5, 2016 at 11:21

Rajesh Dixit

25k5 gold badges52 silver badges86 bronze badges

5 Comments

user2385619 Over a year ago

in the question he has mentioned as "infinitely loop on these elements (block)" but in you case user has to click on the next prev btns. I think he want something like news ticker, where the content becomes visible one by one periodically

Rajesh Dixit Over a year ago

In that case, @eisbehr's answer is appropriate. Still I'll update my answer to show both cases.

Rajesh Dixit Over a year ago

@atul I have updated my answer according to your comment. Hope it helps.

eisbehr Over a year ago

Just a hint, you can replace if(els.next() && els.next().hasClass('block')){ with if(els.next(".block")){

eisbehr Over a year ago

And you can compress the .next() calls from three into only one: jsfiddle.net/gxz609zz/3 :)

Collectives™ on Stack Overflow

Using jQuery .each() to infinitely loop over elements

2 Answers 2

1 Comment

Carousel

Ticker

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Carousel

Ticker

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related