将每 4 个产品包裹在 div 中
Wrap every 4th product within a div
我需要一点帮助。我正在构建我自己的自定义 BigCartel 主题,我 运行 进入以下问题:目前我在主要产品页面上列出我的所有产品(它们不是那么多)并且我试图包装每个div 中的第 4 个产品。
基本上我有
<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>
我不确定我应该如何使用他们的模板语言来做到这一点。
我试着聪明一点。假设您有几个这样的 .wrap
元素。
var products = document.querySelectorAll('.products'),
wraps = document.querySelectorAll('wrap');
[].forEach.call(products, function(e, i){
wraps[Math.floor(i/4)].appendChild(e);
})
使用jQuery:
var wraps = $('.wrap');
$('.products').each( function(e, i){
wraps[Math.floor(i/4)].appendChild(e);
})
jQuery 将为所有产品 return 一个列表 (HTMLCollection),迭代此列表,您可以将您的项目包装在 div引用列表索引。
使用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>
我意识到这个问题有点老了,但我发现接受的答案不起作用。
这就是我如何让它在模板语言中工作(有点像?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 %}
我需要一点帮助。我正在构建我自己的自定义 BigCartel 主题,我 运行 进入以下问题:目前我在主要产品页面上列出我的所有产品(它们不是那么多)并且我试图包装每个div 中的第 4 个产品。 基本上我有
<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>
我不确定我应该如何使用他们的模板语言来做到这一点。
我试着聪明一点。假设您有几个这样的 .wrap
元素。
var products = document.querySelectorAll('.products'),
wraps = document.querySelectorAll('wrap');
[].forEach.call(products, function(e, i){
wraps[Math.floor(i/4)].appendChild(e);
})
使用jQuery:
var wraps = $('.wrap');
$('.products').each( function(e, i){
wraps[Math.floor(i/4)].appendChild(e);
})
jQuery 将为所有产品 return 一个列表 (HTMLCollection),迭代此列表,您可以将您的项目包装在 div引用列表索引。
使用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>
我意识到这个问题有点老了,但我发现接受的答案不起作用。
这就是我如何让它在模板语言中工作(有点像?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 %}