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

444

27 октября 2017, 14:55

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

<body>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
    <div class="box">10</div>
    <div class="box">11</div>
    <div class="box">12</div>
</body>

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

<div class="row1">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</div>
<div class="row2">
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
</div>
<div class="row3">
    <div class="box">9</div>
    <div class="box">10</div>
    <div class="box">11</div>
    <div class="box">12</div>
</div>

То есть необходимо добиться того, чтобы элементы группировались по 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])
    }
};

Но ничего не вышло.

Answer 1

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;
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Экземпляры Vue.js?

Сколько экземпляров можно создать?

334

javascript

sequelize, большое количество моделей-таблиц

Есть mysql база данных, в которой есть огромное (несколько десятков миллионов) таблиц, которые содержат исторически накапливаемые данныеТаблицы...

333

javascript

Способы обновления данных на сайте

Средства разработчика google chrome позволяют отследить ajax запросы (XMLHttpRequest)Но мне вот сейчас попался сайт, который не отправляет эти запросы,...

344

javascript

Как убрать отступ в плагине timelinr-0.9.6 Jqery

Вопрос такой плагин добавляет margin

283