Как добавить каждым N элементам общую обёртку?

Question

[1ss1za]

Есть блок, в котором находится несколько элементов, можно ли сгруппировать их по 4 штуки?

Например, было так:

<div class="wrap">
	<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="item">11</div>
	<div class="item">12</div>
	<div class="item">13</div>
	<div class="item">14</div>
	<div class="item">15</div>
	<div class="item">16</div>
</div>

А должно стать так:

<div class="wrap">
	<div class="wrap-item">
		<div class="item">1</div>
		<div class="item">2</div>
		<div class="item">3</div>
		<div class="item">4</div>
	</div>
	<div class="wrap-item">
		<div class="item">5</div>
		<div class="item">6</div>
		<div class="item">7</div>
		<div class="item">8</div>
	</div>
	<div class="wrap-item">
		<div class="item">9</div>
		<div class="item">10</div>
		<div class="item">11</div>
		<div class="item">12</div>
	</div>
	<div class="wrap-item">
		<div class="item">13</div>
		<div class="item">14</div>
		<div class="item">15</div>
		<div class="item">16</div>
	</div>
</div>

Comments

[FeST1VaL]

эм, а верстку просто не поменять? ну как вариант перебирать элементы их сохранять, после 4 сбрасывать счетчик и добавлять новый блок в который засовываем сохраненные элементы.

Answer 1

[0xD34F]

const WRAP = 4;
const $items = $('.wrap > .item');

for (let i = 0; i < $items.length; i += WRAP) {
  $items.slice(i, i + WRAP).wrapAll('<div class="wrap-item">');
}

или

const WRAP = 4;
const container = document.querySelector('.wrap');
const items = [...container.children];

container.append(...Array.from(
  { length: Math.ceil(items.length / WRAP) },
  (n, i) => {
    const wrapper = document.createElement('div');
    wrapper.classList.add('wrap-item');
    wrapper.append(...items.slice(i * WRAP, (i + 1) * WRAP));
    return wrapper;
  }
));