使用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/ ）