重用jQuery HTML Snippet来填充JSON Array中的数据(Reusing jQuery HTML Snippet to populate data from JSON Array)

重用jQuery HTML Snippet来填充JSON Array中的数据(Reusing jQuery HTML Snippet to populate data from JSON Array)

我正在尝试重用HTML代码段来填充JSON数据数组。 下面的HTML部分隐藏在某处（例如，css： #empty {display：none;}在页面中。这个块基本上定义了LI标签的HTML片段结构.L1标签的全部内容将作为一个单独的行用于循环中的数据。

<ul id="empty"> <li class="h1"> <img class="icon" src="#link" /> <a href="#link">NAME</a> <span class="count">TOTAL</span> </li> </ul>

现在，我如何在jQuery中填充图像src，href，锚文本和TOTAL值？ 从以下代码开始，如何完成它？

var item = $('#empty').clone(); // item.img.src = ?? // item.a.href == ?? // item.a.text == ?? // item.span.text = ?? $('ul#mainlist').append(item);

I am trying to reuse an HTML snippet to fill an array of JSON data. The following piece of HTML is somewhere hidden (eg. css: #empty { display: none; } in the page. This block basically defines the HTML snippet structure of LI tags. The full contents of LI tag will work as one single row for a data in loop.

<ul id="empty"> <li class="h1"> <img class="icon" src="#link" /> <a href="#link">NAME</a> <span class="count">TOTAL</span> </li> </ul>

Now, how can I fill up the image src, href, anchor text and TOTAL value in jQuery? Beginning with the following code, how to accomplish it?

var item = $('#empty').clone(); // item.img.src = ?? // item.a.href == ?? // item.a.text == ?? // item.span.text = ?? $('ul#mainlist').append(item);

最满意答案

您必须在item变量上使用find函数：

var item = $("#empty").clone(); item.find("a").empty().append("new text"); item.find("span").append(" $25.00"); //... $("div").append(item);

我们的想法是clone（）返回一个jQuery对象，因此你可以在其上使用更多的jQuery函数，比如find。

请参阅示例： http ： //plnkr.co/edit/sduJSXwyzUv44Zk8qfyK？p = preview

You have to use the find function on the item variable:

var item = $("#empty").clone(); item.find("a").empty().append("new text"); item.find("span").append(" $25.00"); //... $("div").append(item);

The idea is that clone() returns a jQuery object, and therefore you can use further jQuery functions on it, like find.

See example: http://plnkr.co/edit/sduJSXwyzUv44Zk8qfyK?p=preview