0

Имею:

<div id="2" 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>

Таких более сотни. Я оборачиваю в свой див разными группами в разных количествах.

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));

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

это работает НО мне нужно чтобы это все оставалось в пределах моего id="2" class="slider"

<div id="2" class="slider">
    ..... чтобы это все здесь и оставалось и непермещалось никуда
</div>

2 ответа 2

1

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

const div1 = document.createElement('div');
div1.append(...items.slice(0, 5));

const div2 = document.createElement('div');
div2.append(...items.slice(5, 10));

slider.innerHTML = '';
slider.append(div1); // вставляем див, куда нужно
slider.append(div2); // вставляем див, куда нужно
.slider {
  border: 1px solid blue;
  padding: 5px;
}

.slider > div {
   border: 1px solid red;
   margin: 2px;
}

.wow-ggg {
  width: 20px;
  height: 20px;
  border: 1px solid black;
  margin: 2px;
}
<div id="2" 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>

6
  • а как это сделать используя только id="2"
    – Oiki
    24 фев 2021 в 21:24
  • 1
    @Oiki изучить селекторы и корректно вставить селектор вместо .slider 24 фев 2021 в 21:26
  • вот так правильно будет- jsfiddle.net/profy/xwosnjfu/183
    – Oiki
    24 фев 2021 в 21:34
  • т.е. у меня id="slider2", и я указываю вместо .slider пишу #slider2
    – Oiki
    24 фев 2021 в 21:36
  • @Oiki да, так сработает. Jsfiddle подтверждает это если запустить код) 24 фев 2021 в 21:38
0

Раз уж тут присутствует метка jquery, то для оборачивания элементов есть метод wrapAll().

let items = $("#2 .wow-ggg");
items.slice(0,5).wrapAll('<div class="red">');     
items.slice(5,8).wrapAll('<div class="green">');
.red { color: red; }
.green { color: green; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="2" class="slider">
    <div class="wow-ggg">1</div>
    <div class="wow-ggg">2</div>
    <div class="wow-ggg">3</div>
    <div class="wow-ggg">4</div>
    <div class="wow-ggg">5</div>
    <div class="wow-ggg">6</div>
    <div class="wow-ggg">7</div>
    <div class="wow-ggg">8</div>
    <div class="wow-ggg">9</div>
    <div class="wow-ggg">10</div>
</div>

1
  • какаято стрнность , а на моем сайте не работает
    – Oiki
    26 фев 2021 в 19:15

Ваш ответ

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

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