如何使用jQuery向无序列表<ul>添加项目

Question

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

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

        // item.UserID
        // item.Username

     }

我想添加一个

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

- mrblah

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>

- redsquare

---

我喜欢这个想法，一个附加。 - mrblah

这个程序是否存在注入问题，就像另一个评论所说的那样？ - mrblah

我是源头，所以我相信自己 :) - mrblah

应该使用items.join("")，否则会在<li>项之间加逗号。不过这是一个非常方便的解决方案！ - nico

@mrblah 是的，这种方法确实存在注入问题。无论数据源是什么，最少你都会面临创建无效的模糊HTML的风险。事实上，在这种情况下有两个问题。不仅变量数据没有为HTML转义，而且ID也没有编码以供在URL中使用。在一个快乐路径的世界里，你的ID永远不会包含保留字符，你的用户名也不会包含必须用实体引用替换的字符。现实情况是，像这样的代码应该是完全透明的，所以你永远不必担心它。 - Brad

Answer 2

我决定采用redsquare的优秀答案并进行改进。与其添加HTML，我更喜欢添加jQuery对象。这样，我就不必担心为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的方法将对象数组附加到列表

中。

- Brad

Answer 3

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

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

请查看jQuery文档以获取更多信息。

- krohrbaugh

---

如果您有ID，请单独使用它。不要添加节点名称前缀，这会降低速度。 - redsquare

是的，我知道，我只是想在这里表达一下，因为问题中没有提供ID。 - krohrbaugh

好的，但我在这里和网络上看到了同样的事情。请帮忙传播:) - redsquare

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

    }

- Philippe Leybaert

---

请注意正确编码URL中使用的数据。encodeURIComponent - Brad