Как сгруппировать `div` по 4 штуки?

Изначально есть такая структура:

1

2

3

4

5

6

7

8

9

10

11

12

В результате должна получиться такая:

1

2

3

4

5

6

7

8

9

10

11

12

То есть необходимо добиться того, чтобы элементы группировались по 4 штуки в отдельный div с классом row-n, где n - это номер "группы" элементов.
Пытался реализовать так:
'use strict' var arr = []; var row1 = []; var row2 = []; var row3 = []; arr.push(document.getElementsByClassName('box')); var boxes = arr[0]; for (var i = 0; i < boxes.length; i++) { if(i < 4) {
row1.push(boxes[i]) } else if(i >= 4 && i < 8) {
row2.push(boxes[i]) } else {
row3.push(boxes[i]) } };
Но ничего не вышло.

Ответ

var box, raw, i = 1, z = 1;
// ключевой момент здесь. Пока внутри родителя есть элементы с классом .box (родитель // в данном случае - body, но у вас может быть любой), то выполняем тело цикла. while (box = document.querySelector("body > .box")) { // i - номер итерации. Инкрементируется в конце цикла. Если переваливает за 4, то начинаем // отсчет заново (это нужно, чтобы сгруппировать элементы по 4 штуки) if (i > 4) { i = 1; }
// если это первый заход в группе, то создаем новый div с классом raw-z if (i === 1) { // переопределяем raw в новый, свжесозданный div raw = document.createElement("div"); // с классом raw-z raw.classList.add("raw-" + z); // после чего z увеличиваем z += 1; }
// в созданный на "первом" проходе div с классом raw-z добавляем box'ы raw.appendChild(box);
// если это последний элемент из группы, то отрисовываем всю группу элементов if (i === 4) { document.body.appendChild(raw); }
// увеличиваем счетчик на 1 i += 1; }