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

Question

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

    $.each(data, function(i, item) {

        // item.UserID
        // item.Username

     }

我想补充一个

,并创建一个链接到用户页面的href标记.

Answer 1

最有效的方法是创建一个数组并附加到dom一次.

你可以通过丢失字符串中的所有字符串concat来使它更​​好.要么多次推送到数组,要么使用+ =构建字符串,然后按下,但对某些内容来说,它会变得有点难以阅读.

您还可以将所有项目包装在父元素(在本例中为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>

Answer 2

我决定采用redsquare的优秀答案并对其进行一些改进.我更喜欢添加jQuery对象,而不是添加HTML.这样,我不必担心逃避HTML而不是.

在此示例中,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);

我将一个新的jQuery对象推送到items数组,但是通过方法链接,我可以提前设置属性,例如.text.

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

Answer 3

获取<ul>使用jQuery选择器语法,然后调用append:

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

有关更多信息,请参阅jQuery文档.