在 Jquery 中使用数组动态创建 ul li答案

【问题标题】：Dynamic create ul li with array in Jquery在 Jquery 中使用数组动态创建 ul li
【发布时间】：2015-02-19 09:57:07
【问题描述】：

我正在尝试在 jquery 中动态创建一个 ul > li。

我有这些数据：

var nodeDataArray = [{
    key: 0,
    name: "George V"
}, {
    key: 1,
    parent: 0,
    name: "Edward VIII"
}, {
    key: 2,
    parent: 0,
    name: "George VI"
}, {
    key: 7,
    parent: 2,
    name: "Elizabeth II"
}];

我的 HTML 结构如下：

<ul>
    <li>List 1
        <ul>
             <li>Sub List 1</li>
             <li>Sub List 2</li>
             <li>Sub List 3
                 <ul>
                     <li>Sub Sub List 1</li>
                     <li>Sub Sub List 2</li>
                     <li>Sub Sub List 3</li>
                     <li>Sub Sub List 4</li>
                 </ul>
             </li>
        </ul>
    </li>
    <li>List 1</li>
    <li>List 1</li>
</ul>

我想创建数千个 Ul > li。我想要一些像数组或循环这样的动态方式来创建这些类型的列表。

请帮忙。

提前致谢

【问题讨论】：

我想在这个表单中插入数据
我想以这种形式插入数据.. [pre]var nodeDataArray = [ { key: 0, name: "George V"}, { key: 1, parent: 0, name: " Edward VIII"}, { key: 2, parent: 0, name: "George VI"}, { key: 7, parent: 2, name: "Elizabeth II"} ];[/pre] 并进入上面UL LI 格式。有可能吗？

标签： jquery arrays loops

【解决方案1】：

如果您能说出您将如何获取动态数据会有所帮助。更好的方法是使用模板引擎。否则，您可以使用以下 jquery 方法来构建 html。

var output = [];
$.each(data, function(index,value){ // offcourse the data comes dynamically
    output.push("<ul><li>+value+</li></ul>"); 
});

$("#somediv").html(output.join(""));

这不是一个具体的结果，但会给你一个提示。

【讨论】：