Назначение div и класса для каждого элемента в цикле for

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's .wrap() function.