1

Имею:

<div id="slider" class="slider">
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
</div>

Таких <div class="wow-ggg"></div> более сотни. Мне их нужно обернуть в свой див разными группами в разных количествах.

Для этого хочу использовать:

const items = [...document.querySelectorAll('.item')];

const div1 = document.createElement('div');
document.body.append(div1); // вставляем див, куда нужно
div1.append(...items.slice(0, 5));

const div2 = document.createElement('div');
document.body.append(div2); // вставляем див, куда нужно
div2.append(...items.slice(5, 10));

..... и так далее

Но это работает для класса БЕЗ ЧЕРТЫ. Т.е для .item, а у меня класс .wow-item, т.е. из-за этого"дефиса" все ломается. Как с этим бороться?

Как адаптировать скрипт под мой html?

2
  • Хотите сказать, что вот это const items = [...document.querySelectorAll('.wow-item')]; не работает? Не верю 24 фев 2021 в 20:23
  • я тупица, слепой к томуже, говорилже я не - чтотонедовидел.
    – Oiki
    24 фев 2021 в 20:32

1 ответ 1

0

Всё работает:

const items = [...document.querySelectorAll('.wow-ggg')];

const div1 = document.createElement('div');
div1.classList.add('test');
document.body.append(div1); // вставляем див, куда нужно
div1.append(...items.slice(0, 5));

const div2 = document.createElement('div');
div2.classList.add('test');
document.body.append(div2); // вставляем див, куда нужно
div2.append(...items.slice(5, 10));
.test {
   border: 1px solid red;
   margin: 2px;
}

.wow-ggg {
  width: 20px;
  height: 20px;
  border: 1px solid black;
  margin: 2px;
}
<div id="slider" class="slider">
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
    <div class="wow-ggg"></div>
</div>

1
  • да все окейй, СПАСИБО
    – Oiki
    24 фев 2021 в 20:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.