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);
}

在这里，您不必对任何值进行硬编码，例如＆＃39; flavor＆＃39;或者＆＃39;费用＆＃39;。此代码使您可以灵活地将这些文本更改为其他内容或添加内容，例如＆＃34;大小：10oz＆＃34;等
您只需将这些附加值添加到您的数组中，此代码将处理所有这些值！

jQuery数组到无序列表

4 个答案: