Как пересчитать дочерние узлы в DOM при этом добавляя и удаляя классы?

Question

[Unknown]

Привет!
Есть такой HTML код:

<div id="presentation" class="presentation__website">
								<div class="presentation__website__image1"></div>
								<div class="presentation__website__image2"></div>
								<div class="presentation__website__image3"></div>
								<div class="presentation__website__image4"></div>
							</div>

необходимо пересчитать дочерние узлы #presentation и добавлять/удалять классы.
Работать будет как слайд шоу, классы будут анимировать картинки.

У меня есть и js:

setInterval (slideShow, 4000);

var prtn = document.getElementById('presentation');

function slideShow() {
		for (var i = 0; i < prtn.length; i++) {
			prtn[i];
		}
		
};

как написать на языке фразу "пересчитать друг за другом каждый дочерний элемент родительского div`а с id=#presentation и добавить класс .animation в текущий div, а все остальные удалить"

Comments

[artr_lr]

Как-то так, не? И что-то мне подсказывает, что удалять другие дивы не самая лучшая идея.

var pres = document.getElementById('presentation'),
      child = pres.children,
      currentItem = child[2],
      i = pres.children.length;

while(child[--i]){
    if(child[i] === currentItem) child[i].classList.add('animation');
    else pres.removeChild(child[i]);
}

[Unknown]

artr_lr, не правильно закончил предложение, естественно дивы удалять не нужно)
Спасибо, открыл для себя новое свойство .children

Answer 1

[0xD34F]

Согласитесь, нет необходимости перебирать все дочерние элементы. Достаточно знать индекс элемента, которому назначен класс в данный момент - у него класс удаляем, следующему добавляем.

Кому, какой класс и с каким интервалом времени надо переключать:

const elements = document.querySelector('#presentation').children;
const className = 'animation';
const delay = 1000;

Переключаем:

let i = elements.length - 1;

setInterval(() => {
  elements[i].classList.remove(className);
  i = (i + 1) % elements.length;
  elements[i].classList.add(className);
}, delay);

или

(function next(i) {
  elements.item(i).classList.toggle(className, false);
  i = -~i % elements.length;
  elements.item(i).classList.toggle(className, true);
  setTimeout(next, delay, i);
})(~-elements.length);

Comments

[Unknown]

Да, спасибо