如何在 Javascript (jQuery) 中使用递归函数创建动态 html 列表答案

【问题标题】：How to create a dynamic html list with recursive function in Javascript (jQuery)如何在 Javascript (jQuery) 中使用递归函数创建动态 html 列表
【发布时间】：2013-08-27 17:55:19
【问题描述】：

我正在尝试使用 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>

有人有想法吗？

【问题讨论】：

标签： javascript jquery json recursion

【解决方案1】：

您犯的唯一错误是在循环中使用了全局变量“i”。

for(i = 0; i < nbr; i++)

相反，您应该将语句写为：

for(var i = 0; i < nbr; i++)

确保为循环使用局部变量。

您可以使用以下link查看工作示例

【讨论】：

【解决方案2】：

我认为问题出在你的 for 循环中：

for(i = 0; i < nbr; i++)

应该是：

for(var i=0; i<nbr; i++)

本质上，generateHtml(...) 函数的所有调用都共享同一个循环变量 (i)。因此，当子调用增加i 时，调用循环i 也会增加。通过添加var，您可以确保每个调用都有自己的局部变量。

【讨论】：

非常感谢！我不敢相信我没有看到！