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 you have read our privacy policy.

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