Question

我有一个填充图像链接的数组，我想编写一个脚本，使用javascript（使用jQuery库），将格式化html输出，如下所示：

<div id="gallery">
<div class="scrollable">   
    <div class="items">
        <div>
            <img src="URL_from_array"/>
            <img src="URL_from_array"/>
            <img src="URL_from_array"/>
            <img src="URL_from_array"/>
            <img src="URL_from_array"/>
        </div> 
    </div>
</div>  
</div>

在它处理的每5个图像链接之后，它将在items类中添加另一个div容器。因此，如果数组包含15个图像链接，那么最终结果将是：

<div id="gallery">
<div class="scrollable">   
    <div class="items">
        <div>
            <img src="URL_from_array"/>
            <img src="URL_from_array"/>
            <img src="URL_from_array"/>
            <img src="URL_from_array"/>
            <img src="URL_from_array"/>
        </div> 
        <div>
            <img src="URL_from_array"/>
            <img src="URL_from_array"/>
            <img src="URL_from_array"/>
            <img src="URL_from_array"/>
            <img src="URL_from_array"/>
        </div>
        <div>
            <img src="URL_from_array"/>
            <img src="URL_from_array"/>
            <img src="URL_from_array"/>
            <img src="URL_from_array"/>
            <img src="URL_from_array"/>
        </div> 
    </div>
</div>  
</div>

依此类推，直到数组结束。有什么想法吗？

编辑：对于代码识别感到抱歉，发布时搞砸了。

Edit2：澄清。

Answer 1

*编辑 - 我修改了代码，以便以五个为一组动态创建更多图像。我相信这就是你问的一切。

这个怎么样？

$('div#gallery img').each(function(){
    var i = $('div#gallery img').index(this);
   $(this).attr('src',images[i]); 
});

尝试demo

来自数组的jQuery构建库

1 个答案: