jQuery數組到無序列表

Question

我有以下數組：

var sherbert = [{ 
    flavor: "orange mango",
    cost: 2
},{
    flavor: "lemon lime",
    cost: 4
}];

使用jQuery如何創建一個函數，將這些函數寫為LI項，如：

<li>flavor : orange mango<span>cost : 2</span></li>
<li>flavor : lemon lime<span>cost : 4</span></li>

Answer 1

這樣的東西應該工作，我沒有測試這段代碼。

這里是jquerys的文檔和附加功能：

http://api.jquery.com/each/

http://api.jquery.com/append/

$listSelector = $("#list") //Your list element

$.each(sherbert, function(i, obj) {
    $listSelector.append("<li>flavor : "+obj.flavor+"<span>cost : "+obj.cost+"</span></li>")
});

Answer 2

迭代您的sherbert對象，並將新HTML添加為所需列表中的新li 。

$.each(sherbert, function(index, dessert) {
    var new_html = "Flavor : " + dessert.flavor + "<span>cost : " + dessert.cost + "</span>";
    $('ul').append($('<li></li>').html(new_html));
});

Answer 3

<script>
var sherbert = [{ 
    flavor: "orange mango",
    cost: 2
},{
    flavor: "lemon lime",
    cost: 4
}];
$(document).ready(function(){
    $(sherbert).each(function(i, el){
        var li = document.createElement('li');
        li.innerHTML = "flavor : " + el.flavor + " <span>cost : " + el.cost + "</span>";
        $("#listItems")[0].appendChild(li);
    });
});
</script>
<body>
    <ul id="listItems">
    </ul>
</body>

Answer 4

干得好：

var ul = $('<ul>');

for (var i = 0; i < sherbet.length; i++ ) {
    var li = $('<li>');
    var item = sherbet[i];
    for(var key in item) {
        var span = $('<span>');
        var text = key + ": " + item[key]; // flavour: orange
        span.html(text); // <span>flavour: orange</span>
        li.append(span); // <li><span>flavour: orange</span><span>cost: 2</span></li>
    }
ul.append(li);
}

在這里，您不必對任何值進行硬編碼，例如'flavor'或'cost'。 此代碼使您可以靈活地將這些文本更改為其他內容或添加內容，如“size：10oz”等。
您只需將這些附加值添加到您的數組中，此代碼將處理所有這些！

jQuery數組到無序列表

問題描述

4 個解決方案

解決方案1
3 已采納 2014-04-17 15:49:12

解決方案2
0 2014-04-17 15:50:02

解決方案3
0 2014-04-17 15:52:29

解決方案4
0 2014-04-17 15:56:52

jQuery數組到無序列表

問題描述

4 個解決方案

解決方案1 3 已采納 2014-04-17 15:49:12

解決方案2 0 2014-04-17 15:50:02

解決方案3 0 2014-04-17 15:52:29

解決方案4 0 2014-04-17 15:56:52

解決方案1
3 已采納 2014-04-17 15:49:12

解決方案2
0 2014-04-17 15:50:02

解決方案3
0 2014-04-17 15:52:29

解決方案4
0 2014-04-17 15:56:52