CODEWITHSUNDEEP
javascriptjqueryhtml
Damien
Damien

Reputation: 621

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

Upvotes: 0

Views: 80

Answers (2)

Rajesh
Rajesh

Reputation: 24955

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>

Upvotes: 0

eisbehr
eisbehr

Reputation: 12452

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>

Upvotes: 1

Related Questions