如何按顺序切换元素类？

Question

我试图让每个元素的类自动按顺序一次更改一个.这意味着元素1发光然后随着元素2发光然后熄灭等等而消失.当整个序列重新开始时,每个元素都会闪烁.

$('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>

它不会按预期工作(元素2到4同时突出显示所有内容,然后在元素1完全没有变化时关闭)我不知道为什么.我究竟做错了什么？

Answer 1

所以是的，您不需要.none。只需使用您的默认样式和.highlight类。
获取项目数，创建一个counter，对其进行递增并使用%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>

一些文档：
https : //api.jquery.com/eq/
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_（）