имею
<div id="slider2" class="slider1">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
таких <div class="item"></div> более сотни
С помощью
$('.item').attr('id', function(index) { return (index + 1); })
задаю каждому **item** свой **id**
Вопрос
как мне обернуть в каждый свой див элементы
с 1 по 5 (например)
с 6 по тридцатый
с 31 по 60
и так далее
60 -100
((так чтоб не перечислять id=1, id=2, id=3 и т.д.))
1 ответ
Если я правильно понял, можно, например, так (группировка 1-5, 6-8, 9-10):
const items = [...document.querySelectorAll('.item')];
const sections = [[0, 5], [5, 8], [8, 10]];
sections.forEach((section, i) => {
const div = document.createElement('div');
div.className = `div${i}`;
document.body.append(div); // вставляете обёртку, куда вам нужно
div.append(...items.slice(...section));
});
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
-
Ну так то оно так, новот блин чтото я совсем плохой, а как чтобы эти дивы были со своими классами - чет у меня не получается.? ну что-то вроде ('<div class="new1 ">') далее ('<div class="new2">')– Oiki23 фев 2021 в 23:23
-
Вы про классы обёрток? А что мешает задать им классы через
div1.className =
? 23 фев 2021 в 23:46 -
Ну так то оно так, я добавляю div2.className = "new2 "; div1.className = "new1 "; и так далее, я просто подумал что может быть изначально можно дивы задать с классами., потому как при разбиении на основного дива на пять частей это еще пять строк скрипта– Oiki24 фев 2021 в 18:44
-
А, вы хотите это всё сделать одним циклом. Вы ведь разбиваете 100 дивов не на равное количество элементов, у вас группы разного размера, как в примере из вопроса? 24 фев 2021 в 18:55
-
Еще одна штука вылезла, у меня в коде(ни здесь в примере, а на сайте ) вместо class="item" я имею class="wow-item", и ввиду этого скрипт выдает ошибку, из-за черточки, как исправить этот момент ? я использовал $(".wow-item").addClass("item"); н о думаю есть другое решение..... как исправить?– Oiki24 фев 2021 в 19:26
nodeList
, видоизменив каждый из его элементов так, как вам угодно, то есть в вашем случае обернув в див.