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

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

1 个答案: