Как в javascript последовательно обойти все элементы класса?

Question

[Владимир Боровик]

Есть в html класс .class, как для каждого элемента этого класса задать некоторые параметры, но чтобы параметры задавались последовательно. Т.е. сначала для 1-ого элемента, через 1 секунду для 2-ого и т.д. В jquery метод each задаёт параметры для всех элементов одновременно.

Answer 1

[Дмитрий]

1. Берете список нужных элементов обычным селектором jquery
2. В обычным JS цикле (нумерованном) обходите весь список, беря элемент по порядковому номеру i
3. Устанавливаете timeout на i*1000 для установки класса

Можно и через .each с использованием $(this).index и таких же таймаутов

Comments

[Иван Беленков]

Блестяще и лаконично. Для ясности можно ещё добавить, что операции в JS производятся последовательно(и в циклах, и в чейнинге jQuery, и просто в теле функции), но асинхронно. Т.е., если две операции записаны последовательно, то и выполняться сначала начнёт первая, а потом — вторая. Но вторая не будет ждать, пока первая завершиться. Именно поэтому setTimeout(), в данном случае, необходим.

Answer 2

[Андрей]

Просто setInterval

var $elements = $('.class');
var index = 0;
var intervalId = setInterval(function() {
  if (index >= $elements.length) return clearInterval(intervalId);
  $elements.eq(index).css({border: '1px solid red'}); // тут делаем что нужно
  index++;
}, 1000);