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

我不担心性能，直到你需要运行数万次

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'
    });

template.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>

jQuery可重用元素和子访问

2 个答案: