在DIV中创建无序列表

Question

我有一个DIV，我想使用jQuery在其中动态生成一个带项目列表的项目符号列表。

for (cnt = 0; cnt < someList.length; cnt++) {
  someList[cnt].FirstName + ":" + someList[cnt].LastName + "<br/>"
  // what to write here?
}

- Musa

---

你在这里想做什么？：someList[cnt].FirstName + “：” + someList[cnt].LastName + “<br/>” - Natrium

我正在遍历列表，并希望将someList[cnt].FirstName和someList[cnt].LastName的输出显示为无序列表。我的列表（someList）中有5个项目，因此应创建5个项目符号。 - Musa

Answer 1

尽可能保持简单。使用您现有的JavaScript，您只需要添加以下内容：

$('#myDiv').append("<ul id='newList'></ul>");
for (cnt = 0; cnt < someList.length; cnt++) {
  $("#newList").append("<li>"+someList[cnt].FirstName + ":" + someList[cnt].LastName+"</li>");
}

由于你的HTML已经有了DIV：

<div id="myDiv"></div>

- Jose Basilio

---

FirstName和LastName没有进行HTML编码，这可能存在注入风险。如果它们包含特殊字符如“Amy＆Bob”，则名称可能无法正确显示。这是我的建议...$('<li/>').text(someList[cnt].FirstName + someList[cnt].LastName).appendTo('#newList'); - Tony

Answer 2

脚本：

$(function(){
    someList = [ {FirstName: "Joe", LastName: "Smith"} ,
                 {FirstName: "Will", LastName: "Brown"} ]

    $("#target").append("<ul id='list'></ul>");
    $.each(someList, function(n, elem) {
       $("#list").append("<li>" + elem.FirstName + " : " + elem.LastName + "</li>");
    });
});

和 HTML：

<div id="target" />

- kgiannakakis

---

在您建议的$.each中，我该如何编写以下代码：someList.d[i].FirstName - Musa

谢谢你的解决方案。我使用了for循环并完成了它！ - Musa

你的数组是如何形成的？$.each可以迭代数组和哈希表。当迭代数组时，你可以在回调函数中获取元素(elem)和索引(n)。如果你的数组包含数组元素，则需要在回调函数中调用$.each。 - kgiannakakis

Answer 3

hacky

var list = "<ul>"
for (cnt = 0; cnt < someList.length; cnt++) {
    list += "<li>" + someList[cnt].FirstName + ":" + someList[cnt].LastName + "</li>"
}
list += "</ul>";

甚至不必费心正确创建DOM对象 :)

- Luke Schafer