html标记中的Javascript以避免重复

我是JavaScript的新手，我需要将它与引导一起用于我自己的网页。我现在的问题是，如何循环，使图片名称（存储为数组）出现在HTML代码的正确位置，这样我就不必为每张图片复制代码块

例如：

<div class="row">
    <div class="col-md-3 col-xs-6 portfolio-item">
        <img class="img-responsive" src="01.jpg">
    </div>
</div>


<div class="row">
    <div class="col-md-3 col-xs-6 portfolio-item">
        <img class="img-responsive" src="01.jpg">
    </div>
</div>

<div class="row">
    <div class="col-md-3 col-xs-6 portfolio-item">
        <img class="img-responsive" src="02.jpg">
    </div>
</div>

<div class="row">
    <div class="col-md-3 col-xs-6 portfolio-item">
        <img class="img-responsive" src="03.jpg">
    </div>
</div>

正如我们在这里看到的，唯一不同的文本是src。如何将名称（路径）存储在数组中并生成一个更改src属性的循环？

---

谢谢大家!

您可以使用存储在HTML中的模板，然后使用图像源数组生成实际元素。像这样的事情可以做到这一点

<script type="text/template" id="img-tmpl">
    <div class="row">
        <div class="col-md-3 col-xs-6 portfolio-item>
            <img class="img-responsive" src="<%= src %>">
        </div>
    </div>
</script>

试试这个演示：

我想这就是你要找的

代码

$（函数（）{
var images=[“01.jpg”、“01.jpg”、“02.jpg”、“03.jpg”]；
$.each（图像、函数（索引、元素）{
var imgContainer=“第一个包含（如果没有）


var srcArray=['01.jpg'，'02.jpg'，'03.jpg'，'04.jpg']；
$（文档）.ready（函数（）{
对于（var i=0；i
我建议使用其他一些答案中描述的模板框架之一。如果您有兴趣了解如何在纯JS中实现这一点：


var temp=document.querySelector（“#投资组合项目模板”）；
['01.jpg'，'02.jpg'，'03.jpg'，'04.jpg'].forEach（函数（src）{
临时内容查询选择器（“.img响应”）.src=src；
var newImg=document.importNode（temp.content，true）；
document.querySelector（“#插入点”）.appendChild（newImg）；
})；

JavaScript模板：&在答案本身中发布代码。简单地发布链接不是答案。答案应该是自包含的，链接应该只用于支持答案本身中的内容。简言之……这只是一个注释。感谢反馈如何调用该函数？我只是使用but it将其粘贴到HTML代码中似乎不起作用（图片未显示）。
$(function () {
   var images = ["01.jpg", "01.jpg", "02.jpg", "03.jpg"];
   
   $.each(images, function (index, element) {
     var imgContainer = "<div class='row'><div class='col-md-3 col-xs-6 portfolio-item><img class='img-responsive' src='" + element + "'></div></div>";
      $("body").append(imgContainer);
   });
});

<script>
var srcArray = ['01.jpg', '02.jpg', '03.jpg', '04.jpg'];

$(document).ready(function () {
     for (var i = 0; i < srcArray.length; i++) {
        $('div.row img.img-responsive').eq(i).attr("src", srcArray[i]);
     }

});
</script>