Как можно пронумеровать динамические блоки?

Question

[Corepro]

У меня на страницу динамически выводятся блоки,
Мне нужно чтобы номер блока автоматически подставлялся внутри.
Как я это могу реализовать ?

Пример структуры

<div class="container">
    <div class="block">
        <div class="number">( Тут номер 1 )</div>
    </div>
    <div class="block">
        <div class="number">( Тут номер 2 )</div>
    </div>
    <div class="block">
        <div class="number">( Тут номер 3 )</div>
    </div>
    <div class="block">
        <div class="number">( Тут номер 4 )</div>
    </div>
    и т.д.
</div>

Comments

[Ankhena]

Вам точно нужен JS для этого?
https://webref.ru/css/counter-increment

[Corepro]

Ankhena, Не обязательно, просто и близко не понимаю как это сделать

[Ankhena]

Corepro, выше ссылка о том, как это сделать на CSS.

[Corepro]

Ankhena, Получилось.
Спасибо )

[Corepro]

Ankhena, А не подскажешь чего у меня может счетчик начинаться с номера 3 ?
У меня все это обернуто в slick еще просто.
И первым показывается 3й блок, но если пролистать слайдер назад, то показывается 1 и 2, но тут же меняются на последний номер из списка.
Вот точнее структура будет:





( Тут номер 1 )




( Тут номер 2 )




( Тут номер 3 )


и т.д.

[Вадим]

Corepro, Включен режим бесконечного листания в slick? Если да то вот и ответ.
Слик для этого механизма добавляет дубрилующие ноды. А CSS не в курсе что они дублирующие и нумеровать их не надо. Вот с них нумеровать и начинает.

[Человек]

Ankhena, Вот это чудеса, не думал, что counter(счетчик) можно сделать на css.

Answer 1

[Ярослав Сайкин]

const blockItems = document.querySelectorAll('.block');
blockItems.forEach((item, index) => {
   item.querySelector('.number').textContent = index + 1;
});