Сдвинуть каждый последующий блок на +px?

Question

[MegaPuxapb]

Как сдвинуть каждый .test_block на +100px
То есть,
- 1ый на 100,
- 2ой на 200,
- 3ий на 300px.
https://jsfiddle.net/xpycm789/h9apr4qo/5/

Answer 1

[Stalker_RED]

Ошибок основных две:
1. код запускался еще до загрузки элементов, не мог их найти, и не делал ничего
и даже после исправления
2. вы всем блокам задавали одинаковое значение.

Вот так получше?

Comments

[MegaPuxapb]

спасибо!)

Answer 2

[0xD34F]

Кого надо подвинуть: const selector = '.test_wr .test_block';.

Какое свойство будет отвечать за изменение положения элементов и как его значение будет зависеть от индекса конкретного элемента:

const key = 'top'; // или 'margin-top'
const getVal = i => (i * 100) + 'px';

// или

const key = 'transform';
const getVal = i => `translateY(${i * 100}px)`;

Вот так всё просто получается:

$(selector).css(key, getVal);

// или

document.querySelectorAll(selector).forEach((n, i) => {
  n.style[key] = getVal(i);
  // или
  n.style.setProperty(key, getVal(i));
  // или
  n.style.cssText += [ key, ': ', getVal(i) ].join('');
  // или
  n.setAttribute('style', key.concat(': ', getVal(i)));
});