jQuery数组到无序列表

jQuery array to unordered list

本文关键字：列表 无序 数组 jQuery      更新时间：2023-09-26

我有以下数组：

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>

类似的东西应该可以工作，我没有测试这段代码。

以下是jquerys-each和append函数的文档：

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

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

<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>

开始：

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

在这里，您实际上不必硬编码任何值，如"风味"或"成本"。此代码使您可以灵活地将这些文本更改为其他内容或添加一些内容，如"size:10oz"等。
你只需要将这些附加值添加到你的数组中，这段代码就能处理所有这些！

相关文章：