Оберните каждый четвертый продукт в div

Question

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

<div class="product"></div> 
<div class="product"></div> 
<div class="product"></div> 
<div class="product"></div> 
<div class="product"></div> 

и конечный результат, который я хочу

<div class="wrap"> 
    <div class="product"></div> 
    <div class="product"></div> 
    <div class="product"></div> 
    <div class="product"></div> 
</div> 
<div class="wrap"> 
    <div class="product"></div> 
</div> 

Я не знаю, как я должен это сделать, используя свой язык шаблонов.

Answer 1

Используя template language, я думаю, что это можно сделать так:

<div class="wrap"> 

{% for product in products.all %} 
    <div class="product "> 
    {{ product.name }} </div> 
    {% if forloop.index % 4 == 0 %} 
    </div> 

    <div class="wrap"> 

    {% endif %} 
{% endfor %} 

</div> 

Answer 2

Я старался быть немного умным. Предполагая, что у вас есть несколько из этих .wrap элементов.

var products = document.querySelectorAll('.products'), 
    wraps = document.querySelectorAll('wrap'); 
[].forEach.call(products, function(e, i){ 
    wraps[Math.floor(i/4)].appendChild(e); 
}) 

Answer 3

Использование JQuery:

var wraps = $('.wrap'); 
$('.products').each(function(e, i){ 
    wraps[Math.floor(i/4)].appendChild(e); 
}) 

JQuery возвращает список (HTMLCollection) для всех продуктов, итерация этого списка, вы можете обернуть вашу деталь в сНу отсылая к индексу списка.

Answer 4

Я понимаю, что этот вопрос немного старый, но я обнаружил, что принято отвечать не работает.

Это, как я получил его на работу на языке шаблонного (который является своего рода Liquid?):

{% for product in products %} 

    {% assign zeroindexmodfour = forloop.index0 | modulo: 4 %} 
    {% assign indexmodfour = forloop.index | modulo: 4 %} 

    {% if zeroindexmodfour == 0 %} 
    <div class="wrap"> 
    {% endif %} 

    <div class="product"></div> 

    {% if indexmodfour == 0 or forloop.last %} 
    </div> 
    {% endif %} 

{% endfor %}