Question

我需要一些帮助。我正在构建我自己的自定义BigCartel主题，我遇到了以下问题：目前我在主要产品页面上列出了我的所有产品（它们并不是那么多）而且我正在尝试将每个第4个产品包装在一个DIV。基本上我有

<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

使用jQuery：

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

jQuery将为所有产品返回一个列表（ HTMLCollection ），迭代此列表，您可以将您的项目包装在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

使用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 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 %}

在div中包装每4个产品

4 个答案: