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

我有这个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]);
}

for（变量i=0；i<3；i++）{
var tmpl=document.getElementById（'photo-template'）.content.cloneNode（true）；
$（“#内容”）。追加（tmpl）；
$（“.name”）.text（javascript_数组[i]）；
}

结果应该是页面上有3个模板，每个模板都有不同的名称，但由于某些原因，它只打印数组中最后一个名称的3个模板。例如，如果我有一个数组{“Alex”、“John”、“Thomas”}，那么所有3个模板都将使用Thomas作为名称。如果我有

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

for（var i=0；i<2；i++）{…}

所有3个模板的名称都是John。那么，我该如何使它们以不同的名称出现呢？

当您使用

$（“.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]);
}

for（变量i=0；i<3；i++）{
var tmpl=document.getElementById（'photo-template'）.content.cloneNode（true）；
$（“#内容”）。追加（tmpl）；
$（“.name”）.eq（i）.text（javascript_数组[i]）；
}

只需添加
.eq（i）
即可选择当前使用的模板。
（）
当您执行
$（“.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]);
}

for（变量i=0；i<3；i++）{
var tmpl=document.getElementById（'photo-template'）.content.cloneNode（true）；
$（“#内容”）。追加（tmpl）；
$（“.name”）.eq（i）.text（javascript_数组[i]）；
}

只需添加
.eq（i）
即可选择当前使用的模板。
（）
哇，太简单了。我已经试着解决这个问题好几个小时了。非常感谢。哇，太简单了。我已经试着解决这个问题好几个小时了。非常感谢。