html - 将每 4 个产品包装在一个 div 中

Question

我需要一点帮助。我正在构建自己的自定义 BigCartel 主题，但遇到了以下问题:目前我在主产品页面上列出了我的所有产品(数量不多)，我试图将每 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>

我不确定我应该如何使用他们的模板语言来做到这一点。

Answer 1

使用 jQuery :

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

jQuery 将返回所有产品的列表 ( HTMLCollection )，迭代此列表，您可以引用列表索引将您的项目包装在 div 中。