使用each（）循环div

Question

I've been struggling with the following: A set of 5 classes needs to change colour one after another with an interval of 2 seconds. Now I know I have to make use of .each() however I cannot find anywhere how to properly loop through my divs. They all have the class circle as shown below:

        <div data-text="I've" id="circle1" class="circle">
            <h1>  </h1>
        </div>

        <div data-text="got" id="circle2" class="circle">
            <h1>  </h1>
        </div>

        <div data-text="some" id="circle3" class="circle">
            <h1>  </h1>
        </div>

        <div data-text="stuff" id="circle4" class="circle">
            <h1>  </h1>
        </div>

        <div data-text="toDo" id="circle5" class="circle">
            <h1>  </h1>
        </div>

So I've got the interval, which wasn't a real problem. However now I'm stuck at getting the loop to work:

var circle = $(".circle");



circle.each(function(){

setInterval(function(){ 
 $('.circle').toggleClass('yellow');  
    setTimeout(function(){
    $('.circle').toggleClass('yellow');  
 },2000)
 },4000);
 });

I would really appreciate some help on this. My thanks in advance!

Answer 1

I don't think you really need to use the setInterval as in your scenario, but if you really want to / need to use it, I would suggest you find a way to clear your intervals at the end.

A way you could do it with a simple setTimeout would be like this

 function doColoring(targetClass) { runThroughSamples( Array.prototype.slice.call($(targetClass)), 500, 'yellow' ); } function runThroughSamples( samplesArr, timeout, classToToggle ) { if ( !samplesArr || !samplesArr.length ) { return; } setTimeout( function() { $(samplesArr[0]).toggleClass(classToToggle); runThroughSamples( samplesArr.slice(1), timeout, classToToggle ); }, timeout); } 

 .yellow { background-color: yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="item"> 1 </div> <div class="item"> 2 </div> <div class="item"> 3 </div> <div class="item"> 4 </div> <div class="item"> 5 </div> <button type="button" onclick="doColoring('.item')">Start setTimeout example</button> 

ofcourse you could do it with an interval as well, just it would be important to clear the interval afterwards

 function doColoring(targetClass) { runThroughSamples( Array.prototype.slice.call($(targetClass)), 500, 'yellow' ); } function runThroughSamples( samplesArr, timeout, classToToggle ) { if ( !samplesArr || !samplesArr.length ) { return; } var interval = setInterval( function() { $(samplesArr[0]).toggleClass(classToToggle); samplesArr.splice(0, 1); if (samplesArr.length === 0) { clearInterval(interval); } }, timeout); } 

 .yellow { background-color: yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="item"> 1 </div> <div class="item"> 2 </div> <div class="item"> 3 </div> <div class="item"> 4 </div> <div class="item"> 5 </div> <button type="button" onclick="doColoring('.item')">Start setInterval example</button> 

Answer 2

This is what you have to do. Demo Working Fiddle

1. First set a start point for the interval to start at. Lets make the first circle as the start $('#circle1')

2. Then use the Jquery setInterval to run at every 2 secs (2000 ms).

3. append the class yellow inside the interval, And update the pointer to point to next element.

Jquery code is as below.

var circle = $('#circle1'); //start element

setInterval(function(){ 
      $('.yellow').removeClass('yellow');  //remove existing classes
      circle.addClass('yellow');           // add the class to current circle
      circle = circle.next();              //point the circle to next element. 

  if(circle.length === 0){         //if we have reached the last element go back to top
   circle = $('#circle1');
  }
}, 2000);

Answer 3

Inside "each" function, you don't have to again parse document for ".circle" class. You are basically setting the class "yellow" to ALL the divs and then resetting it back to ALL.

You should use "this" or pass iterator parameter to function and use that to toggle class.

Answer 4

To iterate over an array of elements.

var circles = $('.circle');
circles.each(function(index, item) {
   var $item = $(item);
   // Do your stuff with your item.
});

You need to decorate the item with a $ to make it a full jQuery element.

But what you only need is to have an interval and to track the state of your divs, tracking which div was the last having the yellow class, to set the next one. It can be done with a single interval.

var circles, yellowCircleIndex,
changeColors;

circles = $('.circle');
yellowCircleIndex = circles.length;

changeColors = function() {
    var previousDiv, currentDiv;
    previousDiv = circles.eq(yellowCircleIndex);
    yellowCircleIndex = (yellowCircleIndex + 1) % circles.length;
    previousDiv.removeClass('yellow');
    currentDiv = circles.eq(yellowCircleIndex);
    currentDiv.addClass('yellow');
};

changeColors();
setInterval(changeColors, 2000);

It's more efficient to have a single interval than one for each div. As far as I understood, you want a single div with the yellow class at a time, right?

Answer 5

I hope i understood your desired outcome, you have a problem with your syntax both in the jQuery each and the setTimeout and setInterval.

Plus i think this is more of a recursion solution than a loop one, i did the following function:

var circles = $(".circle");
var counter = 0;

function paintInYellow(div) {
  setTimeout(function() {
    div.toggleClass('yellow');
    if (counter < circles.length) {
      counter++;
    } else {
      counter = 0;
    }
    paintInYellow(circles.eq(counter));

  }, 2000);
}
paintInYellow(circles.first());

you can see a working example on a fiddle i did, here - https://jsfiddle.net/fistuks/rL1h51fv/