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

【问题标题】：Assigning a div and class to each element in a for loop为 for 循环中的每个元素分配 div 和 class
【发布时间】：2013-11-27 13:56:54
【问题描述】：

我正在开发 Shopify 网站并尝试将 div 分配给一组照片。

Shopify 有一个 page.content 变体，可以在单个 div 中输出照片，但我想使用 for 循环为它们每个提供一个唯一的 div 和类。

我的代码没有呈现任何内容，但我认为它接近工作了。使用 .addClass() 可能更容易，但我想我可以在没有 Jquery 的情况下做到这一点。任何想法或 cmet 将不胜感激。

这是测试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>

提前致谢！

【问题讨论】：

您是要显示您在page.content 中放置的图像（通过页面管理区域），还是显示特定产品的所有图像？产品有变体，page.content 没有（它只是 HTML）。
我正在尝试通过管理区域显示放在 page.content 中的图像。它们不是产品。这是我朋友的网站，他想把这个页面当作画廊。一个他可以插入 9-12 张不是产品的照片的地方。所以，我试图定位从 page.content 呈现的 img 元素并相应地设置它的样式。你觉得可以吗？

标签： jquery html for-loop shopify

【解决方案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。

【讨论】：

谢谢斯蒂芬！ .wrap() 函数完美运行。正是我需要的。