Question

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

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

        // item.UserID
        // item.Username

     }

我想添加

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

Answer 1

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

你可以通过丢失字符串中的所有字符串连接来使其更好。要么多次推送到数组，要么使用+ =构建字符串，然后推送，但有些人会更难读。

此外，您可以将所有项目包装在父元素（在本例中为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。

然后我使用Lars Gersmann's method将对象数组附加到列表<ul id="my_list">。

Answer 3

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

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

有关详细信息，请参阅jQuery docs。

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

    }

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

4 个答案: