javascript - jQuery 可重用元素和子访问

Question

我正在创建一个网站，我需要在其中创建可重复使用的元素。这是一个例子:

<div class="item">
    <div class="title"></div>
    <div class="description"></div>
</div>

所以 - 在 for 循环中我想多次克隆这个元素并更改标题和描述内容。

出于这个原因，我将我的模板放在页面中的隐藏元素中，如下所示:

<div id="templates" style="display:none">    
    <div class="item">
        <div class="title"></div>
        <div class="description"></div>
    </div>
</div>

我不确定这是在页面中创建可重用元素的好方法。这是我能想到的。

所以我在页面加载时通过这个获取我的模板元素:

var templates = $("templates");

在我想要重用的每个元素之后(当我需要重用时)，我这样做:

var item = templates.find(".item");

那么我将如何继续创建我的新元素并更改它们的标题和描述？我已经尝试将 #container div 作为所有生成元素的主要容器对象:

$("#container").html(item.clone().html())

但这只给了我一个对象。我实在想不出应该如何处理这件事。

欢迎提出任何意见 - 如果这是一种糟糕的方法，也请赐教，我很想知道一个好的方法。

谢谢。

Answer 1

这就是你如何使用你的模板方法，获取一个克隆，并通过类更改它的元素，然后将该克隆添加到 body 元素

$("#clone").click(function () {
    var clone = $("#templates .item").clone()
    $(".title", clone).html("Title")
    $(".description", clone).html("Desc")
    $("body").append(clone)
})

除非你需要运行这个数万次，否则我不会担心性能