jQuery 如何使用jquery将项目添加到无序列表<ul>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1208467/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add items to a unordered list <ul> using jquery
提问by mrblah
In my json response, I want to loop through it using $.each and then append items to a <ul></ul>element.
在我的 json 响应中，我想使用 $.each 遍历它，然后将项目附加到<ul></ul>元素。
$.each(data, function(i, item) {
// item.UserID
// item.Username
}
I want to add a
我想添加一个
回答by redsquare
The most efficient way is to create an array and append to the dom once.
最有效的方法是创建一个数组并附加到 dom 一次。
You can make it better still by losing all the string concat from the string. Either push multiple times to the array or build the string using += and then push but it becomes a bit harder to read for some.
您可以通过从字符串中丢失所有字符串 concat 来使其更好。要么多次推送到数组，要么使用 += 构建字符串，然后推送，但对于某些人来说阅读起来有点困难。
Also you can wrap all the items in a parent element (in this case the ul) and append that to the container for best performance. Just push the '<ul>'and '</ul>'before and after the each and append to a div.
您也可以将所有项目包装在一个父元素（在本例中为 ul）中，并将其附加到容器中以获得最佳性能。只需按动“<ul>'和'</ul>'之前和之后的每追加到一个div。
data = [
{
"userId": 1,
"Username": "User_1"
},
{
"userId": 2,
"Username": "User_2"
}
];
var items = [];
$.each(data, function(i, item) {
items.push('<li><a href="yourlink?id=' + item.UserID + '">' + item.Username + '</a></li>');
}); // close each()
$('#yourUl').append(items.join(''));<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="yourUl">
</ul>回答by Brad
I decided to take redsquare's excellent answer and improve upon it a bit. Rather than adding HTML, I prefer to add jQuery objects. That way, I don't have to worry about escaping for HTML and what not.
我决定采用 redsquare 的出色答案并对其进行一些改进。与添加 HTML 相比，我更喜欢添加 jQuery 对象。这样，我不必担心转义 HTML 等等。
In this example, datacontains an array of objects, parsed from JSON. Each object in the array has a .titleproperty. I use jQuery's eachfunction to loop through them.
在此示例中，data包含从 JSON 解析的对象数组。数组中的每个对象都有一个.title属性。我使用 jQuery 的each函数来循环它们。
var items=[];
$(data).each(function(index, Element) {
items.push($('<li/>').text(Element.title));
});
$('#my_list').append.apply($('#my_list'), items);
I push a new jQuery object onto the items array, but with method chaining I can set properties ahead of time, such as .text.
我将一个新的 jQuery 对象推送到 items 数组上，但是通过方法链我可以提前设置属性，例如.text.
I then append the array of objects to the list <ul id="my_list">using Lars Gersmann's method.
然后我<ul id="my_list">使用Lars Gersmann 的方法将对象数组附加到列表中。
回答by krohrbaugh
Get the <ul>using jQuery selector syntax and then call append:
获取<ul>using jQuery 选择器语法，然后调用append：
$("ul#theList").append("<li><a href='url-here'>Link Text</a></li>");
See jQuery docsfor more information.
有关更多信息，请参阅jQuery 文档。
回答by Philippe Leybaert
$.each(data, function(i, item) {
var li = $("<li><a></a></li>");
$("#yourul").append(li);
$("a",li).text(item.Username);
$("a",li).attr("href", "http://example.com" + item.UserID);
}
