Как каждому элементу в массиве добавить свой уникальный класс?

Question

У меня есть некоторое количество элементов имеющих свой уникальный класс, необходимо, чтобы при клике на кнопку к каждому элементу добавлялся свой уникальный класс.

Можно ли сделать так, чтобы номер элемента из массива дублировался в добавляемый класс? j номер элемента дублировался в left-member-[ j ]-awake

Ниже я попытался представить то, что я хочу сделать.

let allSleepingMember = document.querySelectorAll('.left-member-1, .left-member-2, .left-member-3, .left-member-4');

button.addEventListener('click', function() {

        for (let j = 0; j < allSleepingMember; j++) {
            allSleepingMember[j].classList.toggle('left-member-'[j]'-awake');
        }
});

Answer 1

Более-менее универсальное решение:

Только лучше все элементы объединить каким-то общим классом, чтобы легче искалось и чтобы не перечислять ваши классы в коде - это нехорошо

<div class = "left-member left-member-1"></div>
<div class = "left-member left-member-2"></div>
<div class = "left-member left-member-3"></div>
<div class = "left-member left-member-4"></div>
<div class = "left-member left-member-5"></div>
<div class = "left-member left-member-6"></div>
<div class = "left-member left-member-17"></div>

// найти все элементы заданного класса
let allSleepingMember = document.querySelectorAll('.left-member');

// обработать все найденные элементы
for (let obj of allSleepingMember) {

    // проверить входит ли в список классов класс заданного формата
    const found = obj.classList.value.match(/left-member-\d+/i);
    
    if (found !== null)
    {
        // получить информацию из найденного класса
        const id = found[0].substring(found.index)
        
        // заменить классы
        obj.classList.replace(found[0], `left-member-${id}-awake`);
    }
}

Answer 2

Как уже правильно заметили, переименовывать классы - мягко говоря, не совсем правильно, и лучше было бы выделить для элементов общий класс.

Если же исходить из поставленных условий, то не обязательно перечислять все классы. Чтобы сузить выборку, но при этом найти все более-менее подходящие, достаточно указать селектор по атрибуту, в данном случае - [attr*=value]. Этакий "мини-RegExp" в CSS.

// Перебираем коллекцию элементов, найденных на основе селектора атрибутов
document.querySelectorAll('div[class*="left-member-"]').forEach(el => {
  // Устанавливаем список классов после замены нужного нам класса
  el.className = el.className.replace(/(left-member-[0-9]+)(?=$| )/gim, '$1-awake');
  // Выводим в консоль списки классов, читаем, любуемся изменениями
  console.info(el.textContent); console.log(el.className, '\n\n');
});

<div class="left-member-1 first">1) + Тут два класса и нужный - в начале</div>
<div class="left-member-2">2) + Здесь всё как положено</div>
<div class="left-member">3) - Этот даже не найдётся - нет числового id</div>
<div class="left-member-4-awake">4) - Не берём - уже добавлено, что нужно</div>
<div class="five left-member-5">5) + Снова два класса. Нужный - в конце</div>
<div class="left-member-six">6) - Нашли, но под замену не подходит - не число</div>
<div class="left-member-7">7) + Тот, что нужен</div>

Переключение (изменения и добавления минимальны):

document.querySelector('div.button').addEventListener('click', fClassRename);

function fClassRename() {
  // Перебираем коллекцию элементов, найденных на основе селектора атрибутов
  document.querySelectorAll('div[class*="left-member-"]').forEach(el => {
    /* Устанавливаем список классов после переименования нужного нам класса */
    // Если список содержит имя класса с окончанием -awake, тогда...
    if (/left-member-[0-9]+(?=-awake)/gim.test(el.className)) {
      // ... удаляем окончание -awake
      el.className = el.className.replace(/(left-member-[0-9]+)-awake/gim, '$1');
    } else {
      // ... иначе, добавляем окончание -awake
      el.className = el.className.replace(/(left-member-[0-9]+)(?=$| )/gim, '$1-awake');
    }
  });
}

.button{display:inline-block;border-radius:4px;box-shadow:inset 0 0 0em 2px grey;padding:.5em 1.5em;transition:.4s ease-out;cursor:pointer}.button:hover{box-shadow:inset 0 0 1.5em 2px grey}

.button~div {
  margin: .5em 0; padding: .25em;
  box-shadow: inset 0 0 5px 0 blue;
}
div[class*="left-member-"][class*="-awake"] {
  box-shadow: 0 0 5px 0 red;
}

<div class="button">Change classnames</div>
<div class="left-member-1 first">1) + Тут два класса и нужный - в начале</div>
<div class="left-member-2">2) + Здесь всё как положено</div>
<div class="left-member">3) - Этот даже не найдётся - нет числового id</div>
<div class="left-member-4-awake">4) - Не берём - уже добавлено, что нужно</div>
<div class="five left-member-5">5) + Снова два класса. Нужный - в конце</div>
<div class="left-member-six">6) - Нашли, но под замену не подходит - не число</div>
<div class="left-member-7">7) + Тот, что нужен</div>

БЛОГ НА HUSL

Как каждому элементу в массиве добавить свой уникальный класс?

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