【发布时间】：2019-06-24 20:53:42
【问题描述】：
我希望达到的目标如下：
- 使用一些后端逻辑生成代表目录结构的 JSON。
- 将此 JSON 传递给 JavaScript 函数以创建表示目录结构的 HTML。
我要生成的 HTML 如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Contents of "Some"</h1>
<ul>
<li data-toggle="collapse" data-target="#first">Collapsible </li>
<ul id="first" class="collapse">
<li>Lorem ipsum dolor text....</li>
<li>Lorem ipsum dolor text....</li>
<li>Lorem ipsum dolor text....</li>
<li data-toggle="collapse" data-target="#sub">Collapsible</li>
<ul id="sub" class="collapse">
<li>Lorem ipsum dolor text....</li>
<li>Lorem ipsum dolor text....</li>
<li>Lorem ipsum dolor text....</li>
</ul>
</ul>
<li> File 1</li>
<li> File 2</li>
<li> File 3</li>
</ul>
</body>
</html>为了生成这个，我假设我的后端程序可以生成如下 JSON：
<script>
var tree = [
{'name': 'file1',
'type': 'file',
'url': 'https://www.google.com'
},
{'name': 'file2',
'type': 'file',
'url': 'https://www.google.com'
},
{'name': 'file1',
'type': 'file',
'url': 'https://www.google.com'
},
{'name': 'directory1',
'type': 'folder',
'url': 'https://www.google.com',
'contents': [
{'name': 'file1',
'type': 'file',
'url': 'https://www.google.com'
},
{'name': 'file2',
'type': 'file',
'url': 'https://www.google.com'
},
]
},
]上述情况下的 URL 将被一些自定义 URL 替换，这将使人们能够下载文件。这与手头的问题无关。
现在，为了生成最终的 HTML 代码，我一直在尝试使用 Javascript 中的递归来构造 DOM 结构。但是由于某种原因我无法弄清楚，我最终构建了一个无限的 DOM。这是我目前的尝试。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>
<script>
var tree = [{
'name': 'file1',
'type': 'file',
'url': 'https://www.google.com'
},
{
'name': 'file2',
'type': 'file',
'url': 'https://www.google.com'
},
{
'name': 'file1',
'type': 'file',
'url': 'https://www.google.com'
},
{
'name': 'directory1',
'type': 'folder',
'url': 'https://www.google.com',
'contents': [{
'name': 'file1',
'type': 'file',
'url': 'https://www.google.com'
},
{
'name': 'file2',
'type': 'file',
'url': 'https://www.google.com'
},
]
},
]
</script>
<h1>Contents of "Some"</h1>
<div id="tree_container">
</div>
<script>
var listContentsOf = function(tree, container = 'tree_container', depth = '1') {
console.log(tree);
console.log(container);
console.log(depth);
$('#' + container).append('<ul id="' + depth + '"> </ul>');
for (i = 0; i < tree.length; i++) {
if (tree[i].type == 'file') {
$('#' + depth).append('<li>' + tree[i].name + '</li>');
} else if (tree[i].type == 'folder') {
$('#' + depth).append('<li>' + tree[i].name + '</li>');
subID = depth + i;
$('#' + depth).append('<div id="' + subID + 'holder"> </div>');
console.log(tree[i].contents);
console.log(subID + 'holder');
// listContentsOf(tree[i].contents, subID + 'holder', subID);
}
}
};
listContentsOf(tree);
</script>
</body>
<'if else' 中的最后一个递归调用被注释了，因为它进入了无限运行。任何关于为什么会发生无限执行以及如何规避它的想法将不胜感激。
【问题讨论】：
标签： javascript jquery html recursion