Как зациклить последовательное добавление/снятие класса для нескольких элементов?

Question

[Роман]

Как добавлять класс active по очереди с задержкой в 1-2 секунды, когда дошло до последнего, то идет заново по кругу?

.wrap div.active{
    color: red;
}

<div class='wrap'>
  <div class='active'>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
</div>

Answer 1

[0xD34F]

function toggleClass(selector, className, delay) {
  let index = -1;

  return setInterval($items => {
    $items.eq(index).removeClass(className);
    index = (index + 1) % $items.length;
    $items.eq(index).addClass(className);
  }, delay, $(selector));
}


const intervalId = toggleClass('.wrap div', 'active', 300);

или

function toggleClass(selector, className, delay) {
  const items = document.querySelectorAll(selector);
  let index = ~-items.length;

  return items.length
    ? setInterval(() => {
        items[index].classList.remove(className);
        index = -~index % items.length;
        items[index].classList.add(className);
      }, delay)
    : null;
}

Comments

[Роман]

спасибо, бомба)

Answer 2

[Егор Живагин]

Пожалуйста

Comments

[Роман]

спасибо)