Как пронумеровать элементы?

Question

[frnd]

Есть список карточек товара, в каждой карточке есть кнопки, у кнопок нужно чтобы были такие названия:
если карточка первая то название всех кнопок в этой карточке будет кнопка-1
если карточка вторая то название всех кнопок в этой карточке будет кнопка-2
и т.д.

ниже ссылка с примером на codepen
я там сделал через условия для примера, но если карточек будет много то так делать не вариант

https://codepen.io/gumka/pen/NWMGMqY

Answer 1

[0xD34F]

Вариант раз - индекс передаётся в коллбек forEach'а:

document.querySelectorAll('.item').forEach((n, i) => {
  n.querySelectorAll('.card-item').forEach(m => m.textContent = `button ${i}`);
});

Два - индекс отдаёт итератор entries:

for (const [ i, n ] of document.querySelectorAll('.item').entries()) {
  for (const m of n.getElementsByClassName('card-item')) {
    m.innerText = 'button ' + i;
  }
}

Три - самостоятельно обновляем значение переменной с индексом:

const items = document.querySelector('.parent-list').children;
for (let i = 0; i < items.length; i++) {
  const subitems = items[i].querySelector('.card-list').children;
  for (let j = 0; j < subitems.length; j++) {
    subitems[j].innerHTML = 'button '.concat(i);
  }
}

Comments

[frnd]

Спасибо, оказалось все просто

Answer 2

[lamer350]

Для работы нужен какой то алгоритм, если вам просто нужно в конце цифру добавлять, то просто необходимо ее заменить на index+1.
А если у вас кнопки будут называться "слон, велосипед, пармезан" - то как бы и выхода другого нет, вам всеравно нужно условия для названий писать. Разве что как вариант все названия, в таком случае, добавлять в массив button_name = ["слон", "велосипед", "пармезан" ]; и вызывать потом в цикле согласно индекса button_name[index]

Comments

[frnd]

Да мне нужно было просто цифру добавлять, но вы написали и понял что вариант с разными названиями тоже пригодится)
Спасибо.