Как обернуть каждые 4 блока в div на чистом Java Script?

Question

[alexfrolov_xcx]

Есть блок внутри которого в дальнейшем будут выводиться большое количество постов, как каждые 4 (или любое другое колличество) поста оборачивать в div на чистом Java Script?

Answer 1

[lemme]

const container = document.querySelector('.section')
  let wrapper = null;
  
  [...document.querySelectorAll('.item')].forEach((el, i) => {
    if (i % 4 === 0) {
      wrapper = document.createElement('div')
      container.appendChild(wrapper)
    }

    wrapper.appendChild(el)
  })

https://jsfiddle.net/zuja1dxa/1/

Comments

[alexfrolov_xcx]

а можно что-то сделать чтобы оно не удаляло из похожего дива?

[lemme]

alexfrolov_xcx: сделай выборку напрямую, т.е .Вместо .item, .section > .wrapper

[alexfrolov_xcx]

lemme:
так??? непомогло(((

[lemme]

alexfrolov_xcx: https://jsfiddle.net/zuja1dxa/2/ попробуй так

[alexfrolov_xcx]

lemme: вот с такой структурой:

<div class="container">
<div class="section">
  <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">7</div>
  <div class="item">8</div>
</div>
<div class="section">
  <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">7</div>
  <div class="item">8</div>
</div>
</div>

[lemme]

alexfrolov_xcx: ну вызови функцию для обоих контейнеров, в чем проблема?

[alexfrolov_xcx]

lemme: проблема в том что обёртки одинаковые и divы со второго section перемещаються в первый, а второй остаётся пустым....

[lemme]

alexfrolov_xcx:
https://jsfiddle.net/zuja1dxa/3/

[alexfrolov_xcx]

да! спасибо огромное)

Answer 2

[Vlad]

Я бы лучше это сделал до вывода этих элементов в страницу.

var items = [].slice.call(document.getElementsByClassName('item'));
var wrap_size = 4;
var t_arr = [];

for (var i = 0, j = items.length; i < j; i+= wrap_size) {
    t_arr.push(items.slice(i, i + wrap_size));
}

document.getElementById('test').innerHTML = '';

for (i = 0; i < t_arr.length; i++) {
    var div = document.createElement('div');
    
    document.getElementById('test').appendChild(div);
    
    for(j = 0; j < t_arr[i].length; j++) {
    	div.appendChild(t_arr[i][j]);
    }
}

Здесь я почистил весь div, но можно удалить только нужные элементы.

Comments

[Kovalsky]

До вывода - это как? В вашем примере все делается после.

[Froggyweb]

Лучше бы css подпилить если я правильно понял задачу.

[alexfrolov_xcx]

а в чём будет разница между этим кодом??

function wrapEach(element, wrapper, countToWrap) {
  var elements = Array.apply(null, document.querySelectorAll(element));
  var parent = elements[0].parentNode;
  var counter = 0;
  var container = null;

  for (var i = 0; i < elements.length; i++) {
    if (counter == 0) {
      container = document.createElement(wrapper);
      container.classList.add('row');
    }
    container.appendChild(elements[i]);
    if (counter + 1 == countToWrap || i + 1 == elements.length) {
      counter = 0;
      parent.appendChild(container);
      continue;
    }
    counter++;
  }
}
wrapEach('.item', 'div', 4);

Answer 3

[Kovalsky]

В цикле для каждых четырёх элементов например создаёте элемент-обертку, перемещаете в него нужные элементы, после этого сам элемент-обёртку кладёте в контейнер (родительский элемент).

Comments

[Negwereth]

appendChild перемещает элемент, если он уже присутствует в DOM/

[Kovalsky]

Negwereth: понял. Хорошо. Это имеет какое-то отношение к описанному алгоритму?

[Negwereth]

Никита Полевой:

складываете в него нужные элементы попутно удаляя их

Обращаю внимание на ненужный шаг.

[Kovalsky]

Negwereth: и правда. Поправлю.