使用JavaScript/jquery将动态html模板打印到页面上

Question

我有这个html模板:

<template id="photo-template">
    <div class="template-border">
        <p class="name"></p>
    </div>
</template>

我想在同一页面上显示多个这些,但根据javascript数组中的某些字符串更改名称.这是我必须显示模板的代码:

for (var i = 0; i < 3; i++) {
    var tmpl = document.getElementById('photo-template').content.cloneNode(true);
    $("#content").append(tmpl);
    $(".name").text(javascript_array[i]);
}

结果应该是页面上的3个模板,每个模板都有不同的名称,但由于某种原因,它只打印3个模板,只有数组中的姓氏.例如,如果我有一个数组{"Alex","John","Thomas"},所有3个模板都会以Thomas为名.如果我做了

for (var i = 0; i < 2; i++) {...}

所有3个模板都有John的名字.那么,我如何制作出不同的名字呢？

Answer 1

当你的$(".name").text()目标是所有具有.name该类的元素,所以你的所有模板.您需要更具体地使用选择器来仅选择刚刚添加的模板.

你可以这样做:

for (var i = 0; i < 3; i++) {
    var tmpl = document.getElementById('photo-template').content.cloneNode(true);
    $("#content").append(tmpl);
    $(".name").eq(i).text(javascript_array[i]);
}

只需添加.eq(i)即可选择您正在使用的当前模板.(https://api.jquery.com/eq/)