Есть ряд блоков например:
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>
Нужно на чистом JS добавить обвертку через каждые N блоков например через каждые три штуки. Открывающий тэг первой обвертки и закрывающий тэг последней можно дописать прямо в код, но все промежуточные тэги обверток нужно добавлять именно на Javascript'e, поскольку для разных экранов будет разное N (html генерируется на РНР, а РНР не понимает размеры экранов).
Попробовал решить задачу вот так:
<div class="wrap">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>
</div><!--wrap-->
<script>
var items = document.querySelectorAll('.item');
for(i = 0; i < items.length; i++) {
var number = i*1+1*1;
if(number % 3 === 0) {
items[i].outerHTML = items[i].outerHTML+"</div><!--wrap-->\n<div class=\"wrap\">";
}
}
</script>
Но в инструментах разработчика в Хроме вижу что после третьего блока просто получаю пустую обвертку:
...
<div class="item">
Item 3
</div>
<!--wrap-->
<div class="wrap"></div>
<div class="item">
Item 4
</div>
...
Хотя должно быть:
...
<div class="item">
Item 3
</div>
</div><!--wrap-->
<div class="wrap">
<div class="item">
Item 4
</div>
...
В общем нужен аналог
var items = $('.item');
for(var i = 0; i < items.length; i += 3) {
items.slice(i, i + 3).wrapAll('<div class="wrap"></div>');
}
только на чистом JS
nth-child
Вам в помощь.