Дать id div в зависимости от его порядка в блоке

Есть div с классом container, внутри него ещё div'ы с классом row, требуется выдать div.row id в зависимости от их порядка в блоке container с использованием JS.

Примерно так:

<div class="container">
<div id="0" class="row"></div>
<div id="1" class="row"></div>
<div id="2" class="row"></div>
<div id="3" class="row"></div>
</div>

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

Автор решения: vsemozhebuty

Следует учесть, что id не должны начинаться с цифры или состоять полностью из цифр, так что лучше добавлять префикс из букв, например:

document.querySelectorAll('div.container > div.row').forEach(
  (element, index) => {
    element.id = `id${index}`;
  }
);

console.log(document.querySelector('div.container').innerHTML);
<div class="container">
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
</div>

→ Ссылка