Изначально есть такая структура:
В результате должна получиться такая:
То есть необходимо добиться того, чтобы элементы группировались по 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;
}
Комментариев нет:
Отправить комментарий