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

Question

[frnd]

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

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

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

Answer 1

[0xD34F]

Где элементы находятся, как назначать им текст в зависимости от индекса контейнера:

const containers = document.querySelectorAll('.item');
const setTexts = (container, index) => container
  .querySelectorAll('.card-item')
  .forEach(n => n.textContent = `button ${-~index}`);

Назначаем:

// индекс передаётся в коллбек forEach'а
containers.forEach(setTexts);

// или, индекс отдаёт итератор entries
for (const [ i, n ] of containers.entries()) {
  setTexts(n, i);
}

// или, можно самостоятельно обновлять значение переменной с индексом
for (let i = 0; i < containers.length; i++) {
  setTexts(containers[i], i);
}

// и цикл для этого использовать не обязательно
(function next(i, n = containers.item(i)) {
  n && (setTexts(n, i), next(i + 1));
})(0);

Comments

[frnd]

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

Answer 2

[lamer350]

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

Comments

[frnd]

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