Как задать тегу ID особого вида через JS?

Question

Как можно задать тегам подобный возрастающий id?

Из данного:

<h2>Заголовок</h2>
<h2>Заголовок</h2>
<h2>Заголовок</h2>
<h2>Заголовок</h2>

Сделать подобным образом:

<h2 id="count-1">Заголовок</h2>
<h2 id="count-2">Заголовок</h2>
<h2 id="count-3">Заголовок</h2>
<h2 id="count-4">Заголовок</h2>

Количество заголовков на странице может быть самым разным. Необходимо найти первый <h2> по DOM-структуре и к последующим прибавлять по 1. Получается, что необходимо указать какой-то цикл, наподобие как for в PHP, но как сделать подобное в JS не могу придумать.

Answer 1

document.querySelectorAll('h2').forEach((item, index) => item.id = "count-" + (index + 1));

document.querySelectorAll('h2').forEach(item => console.log(item.outerHTML));

<h2>Заголовок</h2>
<h2>Заголовок</h2>
<h2>Заголовок</h2>
<h2>Заголовок</h2>

Answer 2

Ответ который дал Igor хорош, только этот код не будет работать в старых браузерах. Во первых стрелочные функции это фичи ES6, а главное метод forEach для NodeList начал поддерживаться не так давно. Что бы все работало везде лучше сделать как то так:

Array.prototype.slice.call(document.querySelectorAll('h2')).forEach(function(item, index) { 
    item.id = "count-" + (index + 1) 
});

БЛОГ НА HUSL

Как задать тегу ID особого вида через JS?

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