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

Question

[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 получить необходимый результат?

Answer 1

[0xD34F]

const parent = document.querySelector('.box').parentNode;
const elems = Array.prototype.slice.call(parent.children, 2, 5);
const wrapper = document.createElement('div');

parent.insertBefore(wrapper, elems[0]);
wrapper.classList.add('wrapper');
wrapper.append(...elems);

Answer 2

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

Answer 3

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

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


Чтобы получить нормальное решение придется сперва нормально вопрос написать.

Comments

[CreativeStory]

спасибо за ответ, а как бы вы сформулировали вопрос?

[be_a_man]

так вопрос нормально написан

[Роман]

Не нормально же )

Answer 4

[slanec]

Вы можете получить коллекцию, обратившись с помощью класса. перебрать их в цикле и нужных местах использовать parentElem.insertBefore(newElem, target)