gpt4 book ai didi

javascript - 循环显示分层数据

转载 作者:行者123 更新时间:2023-11-30 17:17:58 25 4
gpt4 key购买 nike

我正在从本质上是分层数据创建一个数组,例如如下所示:

[
{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 中执行此操作,但需要朝正确的方向插入循环的构造以向下钻取直到没有更多子项,然后返回到顶部数组。

如有任何帮助,我们将不胜感激。

最佳答案

我之前回答过一个问题

这是它的演示: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 ;
}
});
}

此外,请注意,在上面的代码中,您正在执行 return html;来自每个函数回调。不确定你想要得到什么,但在 .each 中它可能像常规循环中的 break 一样工作(如果你将返回 false):

我们可以通过返回 false 从回调函数中停止循环。

那是来自 jquery api 页面。

此外,对于此类任务,我更喜欢使用调试器。目前有很多强大的工具可以在浏览器中调试 HTML/CSS/JS。只需在 Chrome、IE 或 FF 中按 F12(对于最后一个,您可能需要安装 Firebug 扩展),您将获得许多有用的功能以及简单的 JS 调试。

关于javascript - 循环显示分层数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25729270/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com