如何使用jquery将项目添加到无序列表<ul>

在我的json响应中，我想用$ .each循环遍历它，然后将项目追加到<ul></ul>元素中。

  $.each(data, function(i, item) { // item.UserID // item.Username } 

我想添加一个

，并创build一个链接到用户页面的href标签。

Answer 1

最有效的方法是创build一个数组并添加到DOM一次。

您可以通过丢失string中的所有stringconcat来使其更好。 或者多次推送到数组，或者使用+ =来构buildstring，然后推送，但是对于某些阅读来说有点困难。

您也可以将所有项目包装在父元素中（在本例中为ul），并将其附加到容器以获得最佳性能。 只需在前后添加“ <ul>'和'</ul>'然后追加到div即可。

  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('') ); 

Answer 2

我决定采取redsquare的优秀答案，并进一步改进。 我宁愿添加jQuery对象，而不是添加HTML。 这样，我不必担心HTML转义，什么不是。

在这个例子中， data包含一个从JSONparsing的对象数组。 数组中的每个对象都有一个.title属性。 我使用jQuery的each函数来遍历它们。

 var items=[]; $(data).each(function(index, Element) { items.push($('<li/>').text(Element.title)); }); $('#my_list').append.apply($('#my_list'), items); 

我把一个新的jQuery对象推到items数组上，但是通过方法链，我可以提前设置属性，比如.text 。

然后使用Lars Gersmann的方法将对象数组追加到列表<ul id="my_list"> 。

Answer 3

使用jQueryselect器语法获取<ul> ，然后调用append ：

 $("ul#theList").append("<li><a href='url-here'>Link Text</a></li>"); 

查看jQuery文档了解更多信息。

Answer 4

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