重用jQuery HTML片段来填充来自JSON数组的数据

我想重用一个HTML片段来填充JSON数据的数组。下面这段HTML是隐藏的（例如，css：#empty {display：none;}这个块基本上定义了LI标签的HTML片段结构，LI标签的全部内容将作为一个单独的排在循环中的数据。重用jQuery HTML片段来填充来自JSON数组的数据

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

现在，我怎么能填补图片src，HREF，锚文本和总价值在jQuery的？用下面的代码开始，如何完成呢？

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

$('ul#mainlist').append(item);

来源

2016-02-28 Bimal Poudel

如果你想重用HTML片段，也许你可能需要使用mustache.js，是一个选择？这样你可以将片段定义为一个模板，并且不需要手动进行克隆... –

您必须使用项目变量的查找功能：

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

想法是克隆（）返回一个jQuery对象，因此你可以使用更多的jQuery函数，比如find。

见例如：http://plnkr.co/edit/sduJSXwyzUv44Zk8qfyK?p=preview

来源

2016-02-28 02:27:25

这个对我的特定问题更好。一些改进可能不是空（），而是使用：item.find（'a'）[0] .href ='product.php'; –

通常的做法是用模板的内容在页面上然后创建script标签，即

<script type='template/html' id='empty'> 
    <li class="h1"> 
    <img class="icon" src="#link" /> 
    <a href="#link">[NAME]</a> 
    <span class="count">[TOTAL]</span> 
    </li> 
</script>

您缓存HTML变量模板和更换您的数据：

var template = $('#empty').html() // cache html of the template 
var ul = $('ul.main') // cache ul where you going to insert data into 

$.ajax(...).then(function(data) { 

    var html = data.myArray.map(function(e) { 
     return template 
        .replace('[NAME]', e.name) 
        .replace('[TOTAL]', e.total) 
        .replace('[LINK]', e.link) 
    }).join('') 
    ul.html(html) 
})

来源

2016-02-28 02:35:41 vittore

看起来更清楚。我会试一试。 –

重用jQuery HTML片段来填充来自JSON数组的数据

回答

相关问题