Jquery：追加更復雜的html片段

我想使用jquery將更復雜的html片段追加到div。我能夠做到這一點，但我怎麼能在一個附加電話（現在我有幾個）？任何意見讚賞！非常感謝。例如：Jquery：追加更復雜的html片段

<div id="container"> 
    <h1>Something</h1> 
    <!-- Insert here --> 
</div>

的片段應該是這樣的：

var arr = []; // can contain any number of items 
//to be used here: 
<h4>Something h4</h4><!-- This string is static --> 
<p>Some paragraf</p><!-- This string is static --> 
<ul> <!-- This is dynamic --> 
    <li>arr[0]</li> 
    <li>arr[1]</li> 
    <li>arr[2]</li> 
    <li>arr[...]</li> 
</ul>

來源

2013-07-14 Fygo

'我能夠實現這一點，但我想知道什麼是最好/最優雅（性能明智）的方式來做到這一點。指示這應該在[codereview.stackexchange.com]（http://odereview.stackexchange.com） – Ohgodwhy

@Ohgodwhy編輯，所以也許現在我可以得到一些CONSTRUCTIVE答案。謝謝。 – Fygo

這仍然很難評估。你如何填充數組列表？陣列中有什麼？在什麼情況下應該處理動態列表？你在尋找模板嗎？有可能使用JSON並注入結構？ – Ohgodwhy

$.each(arr, function(i,a){ 
    $('ul').append('<li>'+a+'</li>'); 
});

根據您的上述評論。迭代列表，將值推斷爲a，並將該值附加到新創建的列表元素。

來源

2013-07-14 23:34:59 Ohgodwhy

你可以用一個呼叫append()和map()，但不知道它不僅僅是一個簡單的循環更有效做到這一點，但它看起來冷卻器：

var arr = ['error 1', 'error 2', 'error 3', 'error 4', 'error 5']; 

$('<ul />', {id:'someID'}).append(function() { 
    return $.map(arr, function(error) { return $('<li>', {text:error}) }); 
}).appendTo('#container');

FIDDLE

來源

2013-07-14 23:50:26 adeneo

是否有可能將它追加到ul標籤並同時動態地創建ul（現在您已經硬編碼了）？我會如何做到這一點與一個附加電話？我能想出來的唯一方法是製作一個字符串，然後用+ =加入。 – Fygo

@Fygo - 當然，我編輯了代碼以展示如何！ – adeneo

Jquery：追加更復雜的html片段

回答

相關問題