How to toggle the class of elements in sequence?

Question

I am trying to have the class of each elements change one at a time in sequence automatically. This means element 1 glows then goes off as element 2 glows and then goes off and so on. When each element has glowed once the whole sequence starts over.

$('header div:first').toggleClass('highlight').nextAll().toggleClass('none');

function highlight() {
  var $off = $('header div.highlight').toggleClass('none');

  if ($off.next().length) {
    $off.next().toggleClass('none');
  } else {
    $off.prevAll().last().toggleClass('highlight');
  }
}

$(document).ready(function() {
  setInterval(highlight, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
 <div>element 1</div>
 <div>element 2</div>
 <div>element 3</div>
 <div>element 4</div>
</header>

It wont work as expected (elements 2 through 4 highlight all at the same time and then go off while element 1 doesnt change at all) and I dont know why. What am I doing wrong?

Answer 1

So yes, you don't need the .none. Simply use your default styles and the .highlight class.
Get the number of items, create a counter, increment it and loop it using % Reminder Operator:

jQuery(function( $ ) { // DOM is ready

  var $el = $("header>div"), tot = $el.length, c = 0;

  $el.eq(c).addClass("highlight"); // initial highlight

  setInterval(function() {
    $el.removeClass("highlight").eq(++c%tot).addClass("highlight");
  }, 1000);

});

header > div           { transition:0.5s; -webkit-transition:0.5s; }
header > div.highlight { color:#f0f; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
 <div>element 1</div>
 <div>element 2</div>
 <div>element 3</div>
 <div>element 4</div>
</header>

Some docs:
https://api.jquery.com/eq/
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_()

Answer 2

The none class along with the toggleClass() calls can be a bit confusing to read through. You may be better off by simply keeping track of your current highlighted element via div.highlight and determining which one to target next using the updated code below :

function highlight() {
    // Remove the highlight from all options
    var $current = $('div.highlight');
    // Store the next one
    var $next = $current.next('div');
    // Remove all highlighting
    $('div.highlight').removeClass('highlight')
    if($next.length){
      $next.addClass('highlight');
    } else {
      $('header div:first').addClass('highlight');
    }
}
// When the document is ready
$(function() {
    // Initially set your first element as highlighted and start your interval
    $('header div:first').addClass('highlight');
    setInterval(highlight, 1000);
});

Example

You can see an example of this in action here and demonstrated below :

Image is for example purposes only and timing may appear different than actual code executing... :)