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())

但这只是给了我一个对象。我根本不知道应该如何进行。

感谢任何 cmets - 如果这是一种不好的方法，请赐教，我很想知道一个好的方法。

谢谢。

Answer 1

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

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

在您需要运行数万次之前，我不会担心性能

Answer 2

我觉得将隐藏的内容写入文档，永远不会显示是不正确的。

相反，您可以使用一些模板框架或模板插件，例如这个 https://github.com/codepb/jquery-template

您需要为这些模板创建html文件并提供对象来填充模板

$("#template-container").loadTemplate("Templates/template.html",
    {
        author: 'Joe Bloggs',
        date: '25th May 2013',
        authorPicture: 'Authors/JoeBloggs.jpg',
        post: 'This is the contents of my post'
    });

模板.html

<script type="text/html" id="template">
    <div data-content="author"></div>
    <div data-content="date"></div>
    <img data-src="authorPicture" data-alt="author"/>
    <div data-content="post"></div>
</script>