Как выбрать каждые 4 элемента и обернуть их в тег?

Question

[BarneyGumble]

Есть список элементов, следующих друг за другом. Нужно каждые 4 из них обернуть в <div class="wrap"></div>



Пытался сделать так, но обернулись все элементы в один общий .wrap

$('.row-module .product-layout.product-grid:nth-child(4n-3), .row-module .product-layout.product-grid:nth-child(4n-2), .row-module .product-layout.product-grid:nth-child(4n-1), .row-module .product-layout.product-grid:nth-child(4n)').wrapAll('<div class="wrap"></div>');

Answer 1

[0xD34F]

Вспомогательная функция - нарезание массивоподобного объекта на куски заданного размера:

const chunked = (data, chunkSize, slice = data.slice) =>
  Array.from(
    { length: Math.ceil(data.length / chunkSize) },
    function(_, i) {
      return this(i * chunkSize, (i + 1) * chunkSize);
    },
    (slice instanceof Function ? slice : Array.prototype.slice).bind(data)
  );

Где элементы находятся, во что и по сколько надо оборачивать:

const parentSelector = '.row-module';
const wrapperTag = 'div';
const wrapperClass = 'wrap';
const wrapSize = 4;

Оборачиваем:

for (const $n of chunked($(parentSelector).children(), wrapSize)) {
  $n.wrapAll(`<${wrapperTag} class="${wrapperClass}">`);
}

или

const parent = document.querySelector(parentSelector);
chunked(parent.children, wrapSize).forEach(n => {
  parent.append(document.createElement(wrapperTag));
  parent.lastChild.classList.add(wrapperClass);
  parent.lastChild.append(...n);
});

Comments

[BarneyGumble]

Божественно!