[英]How to create a dynamic html list with recursive function in Javascript (jQuery)
我试图用javascript中的递归函数创建一个html列表,但我真的不明白为什么实际结果与我的预期结果不符。
JSON
{
"sections": {
"1": {
"name": "Section 1",
"sections": {
"3": {
"name": "Section 1.1",
"sections": {
"4": {
"name": "Section 1.1.1",
"sections": {}
}
}
}
}
},
"2": {
"name": "Section 2",
"sections": {}
}
}
}
使用Javascript
$(document).ready(function() {
generateHtml(myLoadedJson);
});
function generateHtml(pData) {
var self = this;
var html = '';
if("sections" in pData) {
html+= '<ul>';
var objList = Object.keys(pData.sections);
var nbr = objList.length;
for(i=0; i<nbr; i++) {
var key = objList[i];
var obj = pData.sections[key];
html+= '<li><div>' + obj.name + '</div>'
html+= generateHtml(pData.sections[key]);
html+= '</li>';
}
html+= '</ul>';
}
return html;
};
预期结果
<ul>
<li>
<div>Section 1</div>
<ul>
<li>
<div>Section 1.1<div>
<ul>
<li>
<div>Section 1.1.1<div>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div>Section 2</div>
</li>
</ul>
实际结果
<ul>
<li>
<div>Section 1</div>
<ul>
<li>
<div>Section 1.1</div>
<ul>
<li>
<div>section 1.1.1</div>
<ul></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
有人有主意吗?
我认为问题只在您的for循环中:
for(i = 0; i < nbr; i++)
应该:
for(var i=0; i<nbr; i++)
本质上, generateHtml(...)
函数的所有调用都共享同一个循环变量( i
)。 因此,当子呼叫i
递增时,呼叫循环i
也会递增。 通过添加var
您可以确保每个调用都具有自己的局部变量。
您所做的唯一错误是在循环中使用全局变量“ i”。
for(i = 0; i < nbr; i++)
相反,您应该将语句写为:
for(var i = 0; i < nbr; i++)
确保为循环使用局部变量。
您可以使用以下链接查看工作示例
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.