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