Как в цикле forEach обратиться к следующей итерации?

Question

Делаю переключение блоков, через добавление и удаление класса active у блоков.

var blocks = document.querySelectorAll('.block');

next.addEventListener('click', function () {
    blocks.forEach(function (val, id) {
        if (val.classList.contains('active')){

            val.classList.remove('active');

        }
    })
})

<div class="content">
    <div class="arrow left" id="prev">
      <button>left</button>
    </div>
    <div class="block active" id="block1">
      block1
    </div>
    <div class="block" id="block2">
      block2
    </div>
    <div class="block" id="block3">
      block3
    </div>
    <div class="block" id="block4">
      block4
    </div>
    <div class="arrow right" id="next">
      <button>right</button>
    </div>
</div>

и вот после val.classList.remove('active'); мне нужно написать val.classList.add('active'); но уже к следующему элементу массива. B вопрос, как можно это сделать, используя именно цикл forEach?

Answer 1

Вот вариант без цикла.

next.addEventListener('click', function() {
  // берем активный блок
  const activeBlock = document.querySelector('.content>.block.active');
  // берем следующий блок
  const nextBlock = activeBlock.nextElementSibling;
  // если следующий элемент - блок, то добавляем ему класс active
  if (nextBlock.classList.contains('block')) {
    nextBlock.classList.add('active');
  } else {
    // иначе добавляем певому блоку класс active
    const firstBlock = document.querySelector('.content>.block');
    firstBlock.classList.add('active');
  }
  // убираем у "старого" блока класс active
  activeBlock.classList.remove('active');
});

.active {
  color: red;
}

<div class="content">
  <div class="arrow left" id="prev">
    <button>left</button>
  </div>
  <div class="block" id="block1">
    block1
  </div>
  <div class="block" id="block2">
    block2
  </div>
  <div class="block" id="block3">
    block3
  </div>
  <div class="block active" id="block4">
    block4
  </div>
  <div class="arrow right" id="next">
    <button>right</button>
  </div>
</div>

БЛОГ НА HUSL

Как в цикле forEach обратиться к следующей итерации?

Ответы (1 шт):