Question

我正在Shopify网站上工作并尝试将div分配给一系列照片。

Shopify有一个page.content变体，可以在一个div中吐出照片，但是我想使用for循环为每个人提供一个独特的div和类。

我所拥有的代码不会呈现任何内容，但我认为它接近于工作。使用.addClass（）可能更容易，但我想我可以在没有Jquery的情况下完成它。任何想法或意见将不胜感激。

这是测试page

我的代码：

<div class="row products">
  <div class="product span12">
    <div class="image"> 
       {% for variant in page.content %} 
       {% if variant contains 'img' %} 
        <div class="image"> 
          <div class="span4">{{ variant.image }}</div>
        </div> 
       {% endif %} 
       {% endfor %} 
    </div>
  </div>
</div>

提前致谢！

Answer 1

使用Liquid不适用于此任务。您可以使用javascript，如下所示：

<script>
  var images = document.body.getElementsByTagName('img');  

  var i;
  for (i = 0; i < images.length; i++)
  {
    var parent  = images[i].parentNode;
    var sibling = images[i].nextSibling;

    var wrapper = document.createElement('div');
    wrapper.className = 'new-div';

    wrapper.appendChild(images[i]);

    if (sibling) {
          parent.insertBefore(wrapper, sibling);
    } else {
         parent.appendChild(wrapper);
    }
  }
</script>

查看类似的SO问题here和here。

或者你可以使用jQuery的.wrap() function。

为for循环中的每个元素分配div和class

1 个答案: