重用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數組的數據

回答

相關問題