2

少し助けが必要です。独自のカスタム BigCartel テーマを構築していて、次の問題に遭遇しました。現在、メインの製品ページにすべての製品をリストしています (それほど多くはありません)。 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>

テンプレート言語を使用してこれを行う方法がわかりません。

4

4 に答える 4

3

jQuery の使用:

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

jQuery はすべての製品のリスト ( HTMLCollection ) を返し、このリストを繰り返します。リスト インデックスを参照する div で項目をラップできます。

于 2015-03-17T20:01:55.797 に答える
2

少し賢くなってみました。.wrapこれらの要素がいくつかあると仮定します。

var products = document.querySelectorAll('.products'), 
    wraps = document.querySelectorAll('wrap');
[].forEach.call(products, function(e, i){
  wraps[Math.floor(i/4)].appendChild(e);
})
于 2015-03-17T19:54:28.147 に答える
0

この質問は少し古いと思いますが、受け入れられた答えがうまくいかないことがわかりました。

これは、テンプレート言語で動作させる方法です(これはちょっと? 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 %}
于 2016-10-14T06:59:18.370 に答える