我用基本上是分层的数据创建一个数组,例如如下:
[
{id: 1, title: 'hello', parent: 0, children: [
{id: 3, title: 'hello', parent: 1, children: [
{id: 4, title: 'hello', parent: 3, children: [
{id: 5, title: 'hello', parent: 4},
{id: 6, title: 'hello', parent: 4}
]},
{id: 7, title: 'hello', parent: 3}
]}
]},
{id: 2, title: 'hello', parent: 0, children: [
{id: 8, title: 'hello', parent: 2}
]}
]
我希望循环遍历数组,但无法理解如何以递归方式循环创建一个无序列表,其中每个子级别都是缩进的。 尝试在JavaScript中执行此操作,但需要向正确的方向推进以构建循环以向下钻取,直到没有更多子项,然后返回到顶部数组。
任何帮助都将不胜感激。
答案 0 :(得分:2)
我之前回答了一个问题
以下是演示:http://jsfiddle.net/zn2C7/7/
var list = $("<ul>");
function populatedata() {
$.each(data.FolderList, function (i, folder) {
if (folder.ParentFolderID == -1) {
var item = $("<li>").html(folder.FolderName);
list.append(item);
var children = $('<ul>');
item.append(children);
checkChild(folder.FolderID, children);
}
});
$('body').append(list);
}
function checkChild(parentid, parent) {
$.each(data.FolderList, function (i, folder) {
if (folder.ParentFolderID == parentid) {
var item = $("<li>").html(folder.FolderName);
var children = $('<ul>');
parent.append(item);
item.append(children);
checkChild(folder.FolderID, children);
}
else {
return ;
}
});
}
可以使用html变量构建它,就像你试图做的那样,但是使用jQuery的{DOM}操作函数要简单得多($('<ul>') and $('<li>') - create new element, .append() - append element to some other element)
function checkChild(parentid) {
$.each(data.FolderList, function (i, folder) {
if (folder.ParentFolderID == parentid) {
html += '<li><ul>' + folder.FolderName;
checkChild(folder.FolderID);
html+=</ul></li>
return html;
}
else {
return ;
}
});
}
另外,请注意在上面的代码中你正在返回html;来自每个函数回调。不确定你想要得到什么,但是在.each它可能像常规循环中断(如果你将返回false):
我们可以通过返回false来停止回调函数中的循环。
那是来自jquery api页面。
此外,对于此类任务,我更喜欢使用调试器。目前,在浏览器中有很多强大的HTML / CSS / JS调试工具。只需在Chrome,IE或FF中按F12(对于最后一个,您可能需要安装Firebug扩展),您将获得许多有用的功能以及简单的JS调试。