Задать вопрос

Как вывести порядковый номер элемента через цикл for of?

Возможно ли через цикл for of просто вывести порядковый номер элементов. Например у меня есть в HTML структура:
<h2 class="one">Какой-то заголовок</h2>
    <p class="one">Какой-то текст</p>
    <p class="one">Какой-то текст</p>
<button id="btn" onclick="btnClick()">Нажми на меня!</button>

Я планирую заменить текст элементов с классом 'one' на их порядковый номер.
Я могу сделать это через цикл for так :
function btnClick(){
  let elems = document.getElementsByClassName('www');
  
  for(let i = 0; i < elems.length; i++){
    elems[i].textContent = i+1;
  }
 
}

А как также просто заменить текст элемента на их порядковый номер через цикл for of? Возможно ли такое?
  • Вопрос задан
  • 2323 просмотра
Подписаться 1 Простой 1 комментарий
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Object.entries + деструктуризация:

for (const [ index, el ] of Object.entries(elems)) {
  ...

Надо только иметь в виду, что тут index будет строкой. Чтобы получать числа, можно позаимствовать метод entries у Array или NodeList:

for (const [ index, el ] of Array.prototype.entries.call(elems)) {
  ...

Или, превращать получаемую HTMLCollection в массив:

const elems = [...document.getElementsByClassName('one')];
for (const [ index, el ] of elems.entries()) {
  ...

Или, для получения элементов вместо getElementsByClassName использовать querySelectorAll, возвращающий NodeList:

const elems = document.querySelectorAll('.one');
for (const [ index, el ] of elems.entries()) {
  ...
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Lumore
@Lumore
Front-end developer
elems.map((item, index) => {
  item.textContent = index
})

==============================
elems.forEach(function(val, index) {
  elems[index].textContent = index;
});
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы