@CreativeStory

Как сделать обертку?

Добрый день!

Столкнулся с проблемой обертки контейнеров.

есть такой код:
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>


нужно найти последовательные 3,4,5 контейнер и обернуть в новый контейнер, типа:

<div class="box"></div>
<div class="box"></div>
<div class="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<div class="box"></div>
<div class="box"></div>

подскажите, пожалуйста, как на чистом JS получить необходимый результат?
  • Вопрос задан
  • 262 просмотра
Решения вопроса 3
0xD34F
@0xD34F Куратор тега JavaScript
const elems = [].slice.call(document.querySelectorAll('.box'), 2, 5);
const parent = elems[0].parentNode;
const wrapper = document.createElement('div');

parent.insertBefore(wrapper, elems[0]);
wrapper.classList.add('wrapper');
wrapper.append(...elems);
Ответ написан
Комментировать
yanis_kondakov
@yanis_kondakov
Универсальное решение

codepen

const boxes = document.querySelectorAll('.box');

const isNested = (f, t, c) => c + 1 >= f && c + 1 <= t;

const insertAfter = (elem, refElem) => refElem.parentNode.insertBefore(elem, refElem.nextSibling);

const transferBoxesToWrapper = (fromIndex, toIndex, wrapper) => {
  boxes.forEach((box, i) => isNested(fromIndex, toIndex, i) && wrapper.appendChild(box));
}

const createWrapper = (fromIndex, toIndex) => {
  let wrapper = document.createElement('div');
  
  wrapper.classList.add('wrapper');
  insertAfter(wrapper, boxes[fromIndex - 1]);
  transferBoxesToWrapper(fromIndex, toIndex, wrapper);
}

createWrapper(3, 5);
Ответ написан
Комментировать
Stalker_RED
@Stalker_RED
let wrapper = document.createElement('div')
wrapper.className = 'wrapper'

wrapper.appendChild(document.querySelector(`.box:nth-of-type(3)`))
wrapper.appendChild(document.querySelector(`.box:nth-of-type(3)`))
wrapper.appendChild(document.querySelector(`.box:nth-of-type(3)`))

document.querySelector('.box:nth-of-type(2)').after(wrapper)

Говнокод, но работает:


Чтобы получить нормальное решение придется сперва нормально вопрос написать.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@slanec
Вы можете получить коллекцию, обратившись с помощью класса. перебрать их в цикле и нужных местах использовать parentElem.insertBefore(newElem, target)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы