JSFiddle - React, Tailwind, and code Playground

by alexandroppolus

HTML

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

CSS

div {
  padding: 10px 10px 10px 10px;
  margin-bottom: 10px;
  min-height: 20px;
}
.container {
  background: red;
}
.item-box {
  background: green;
}
.item {
  background: blue;
}

JavaScript

var groupLength = 2; // по сколько объединять

var container = document.querySelector('.container');
var items = container.querySelectorAll('.item');
var df = document.createDocumentFragment();
var range = document.createRange();
for (var i = 0; i < items.length; i += groupLength) {
  var wrap = document.createElement('div');
  wrap.className = 'item-box';
  range.setStartBefore(items[i]);
  range.setEndAfter(items[Math.min(i + groupLength, items.length) - 1]);
  range.surroundContents(wrap);
  df.appendChild(wrap);
}
container.appendChild(df);