jQuery在多个元素上间隔切换类

Question

I've created this little fancy jQuery Snippet to toggle the class of an element in an interval:

setInterval(function(){$('.grid-item .slide-image').toggleClass('active')}, 800);

The script works fine! Now I got multiple elements with the base-class .slide-image in the wrapper .grid-item .

<div class="grid-item">
  <div class="slide-image"><img src="http://www.placehold.it/500x500/233953"></div>
  <div class="slide-image"><img src="http://www.placehold.it/500x500/03144b"></div>
  <div class="slide-image"><img src="http://www.placehold.it/500x500/030a4b"></div>
</div>

Is there a way to rewrite the snippet so the second .slide-image gets the class .active after the first one? Then the third element and so on...

The Problem: The amout of .slide-image -elements is no defined. In some cases there are two of them, in another there are four elements.

Check out my CodePen!

Answer 1

Try this

var slides = $('.grid-item .slide-image'),  // cache slides 
    counter = 0;                            // global counter

setInterval(function(){
  slides.removeClass('active');             // remove active class
  slides.eq(counter).addClass('active');    // add active class
  counter++;

  if (counter == slides.length) counter = 0;  // reset counter after last slide
}, 800);

Updated CodePen

Answer 2

You can check if current active element id last or not. if it is, then show first element in set else show next sibling element:

$(function(){
  var slides = $('.grid-item .slide-image');
  setInterval(function(){
    var currentactive = $('.active');
   var _target = currentactive.is(':last-child') ? slides.first() : currentactive.next();
   slides.removeClass('active')
  _target.addClass('active')
 }, 800);
});

Working Demo