Как подсчитать li списки и вывести нумерацию?

Question

Всем доброго времени суток! Подскажите, пожалуйста, как сделать вывод такого списка, чтобы рядом где нумерация выводилось еще сколько осталось списков ниже, а последний список выводил не номер списка, а слово например "Готово".

Сделал нумерацию через css, но это немного не то.

Вот код как я вывожу сейчас:

ol li {
  display: flex;
  padding: 40px 0 20px;
  margin-bottom: 10px;
  position: relative;
  counter-increment: my-awesome-counter;
  border-bottom: 2px dashed #e6e6e6;
}

ol li::after {
  position: absolute;
  top: 7px;
  left: 0;
  content: "Шаг" " " counter(my-awesome-counter);
  font-size: 1.2rem;
  font-weight: 600;
  color: brown;
}

ol li:last-child::after {
  content: "Готово!";
}

<ol>
  <li>Пример списка</li>
  <li>Пример списка</li>
  <li>Пример списка</li>
  <li>Пример списка</li>
  <li>Пример списка</li>
</ol>

Answer 1

Вот решение с помощью JS

window.addEventListener('DOMContentLoaded', () => {
  list('#list li')
})


const list = selector => {
  const listItems = document.querySelectorAll(selector) // достаем все нужные ДОМ узлы

  listItems.forEach((item, index) => { // перебераем каждый елемент и вставляем в него нужный спан с каунтером
    let span = document.createElement('span')
    span.classList.add('counter')
    span.innerHTML = `Шаг ${index + 1} из ${listItems.length}` // тут текст каунтера
    item.append(span)
  })

  const lastItem = document.querySelectorAll('#list li')[listItems.length - 1] // последний елемент списка 
  lastItem.lastChild.innerHTML = 'Готово'
}

ol li {
  display: flex;
  padding: 40px 0 20px;
  margin-bottom: 10px;
  position: relative;
  counter-increment: my-awesome-counter;
  border-bottom: 2px dashed #e6e6e6;
}

ol li .counter {
  position: absolute;
  top: 7px;
  left: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: brown;
}

<ol id="list">
  <li>Пример списка</li>
  <li>Пример списка</li>
  <li>Пример списка</li>
  <li>Пример списка</li>
  <li>Пример списка</li>
</ol>

БЛОГ НА HUSL

Как подсчитать li списки и вывести нумерацию?

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