javascript - Add and remove class to elements in sequence from array -

for had trouble understanding me before rephrased question. have array of variables corresponds ids of 5 divs. trying make each div change color few seconds 1 one color changes before next div changes color (similar lights on traffic light or game of simon). using loop iterate through each array item. using jquery's .addclass() , removeclass() settimeout try achieve effect. here code:

//css .color{background-color: red;} //javascript var div1 = document.getelementbyid('divid'); etc... var total = [div1, div2, div3, div4, div5]; for(var n=0; n<counter; n++){ $(total[n]).addclass("color"); settimeout(function(){ $(total[n]).removeclass("color"); }, 3000); } 

update

i found solution. posting having same problem. used jquery .delay() , .queue() create effect of each div receiving class 1 @ time .addclass() , .removeclass(). thank help.

for(var n=0; n<counter; n++){ flash(n); } function flash(num){ var int = num + 1; $(total[num]).delay(2000 * int).queue(function(){ $(this).addclass("light").delay(1000).queue(function(){ $(this).removeclass("light"); }); $(this).dequeue(); }); } 

you can try

var color = ['green', 'red', 'yellow'];  var = 0;  setinterval(function(){    $('.light').css('background-color', color[i++ % color.length]);  }, 2000);

.light { width: 100px; height: 100px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="light"></div>