[英]How do I create a nested ordered list in HTML
从嵌套的JSON对象创建这样的嵌套列表的最佳方法是什么(按列表,我的意思是<ol>标记或具有类似行为的自定义内容):
作为示例,让我们使用最多3个“嵌套级别”的限制。
将生成此列表的JSON对象如下所示:
[
{
"content": "Parent 1",
"children": [
{
"content": "Sub 1",
"children": [...]
},
{
"content": "Sub 2",
"children": [...]
}
]
},
{
"content": "Parent 2"
}
]
尝试这种最简单的方法
var obj = [{ "content": "Parent 1", "children": [{ "content": "Sub 1", "children": [{ "content": "sub sub 12" }] }, { "content": "Sub 2", "children": [{ "content": "sub sub 12" }] }] }, { "content": "Parent 2" }]; var html = getListHTML(obj); console.log( html ); $( "body" ).append( html ); function getListHTML(obj) { if ( !obj ) { return ""; } var html = "<ol>"; html += obj.map(function(innerObj) { return "<li>" + innerObj.content + "</li>" + getListHTML(innerObj.children) }).join(""); html += "</ol>"; return html; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
然后,您可以根据li
的层次结构级别给出不同的起始值( 1
或a
或i
)
这是一个建议,它具有针对Array#forEach
的迭代和递归回调,并具有动态生成的适当元素。
function getValues(el) { var li = document.createElement('li'), ol; li.appendChild(document.createTextNode(el.content)); if (Array.isArray(el.children)) { ol = document.createElement('ol'); el.children.forEach(getValues, ol); li.appendChild(ol); } this.appendChild(li); } var data = [{ content: 'Parent 1', children: [{ content: 'Sub 1', children: [] }, { content: 'Sub 2', children: [{ content: 'Sub Sub 1' }, { content: 'Sub Sub 2' }, ] }, { content: 'Sub 3' }] }, { content: 'Parent 2' }], ol = document.createElement('ol'); data.forEach(getValues, ol); document.body.appendChild(ol);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.