javascript 中的递归列表生成器函数

Question

我设置了 fiddle here.

以下代码从一个对象

生成一个html列表

function generateList(data, $e) {
    // create an inner item
    function createInner(obj) {
        var li = $('<li>');
        li.text(obj.text);
        if (obj.children != undefined && obj.children.length > 0) {
            innerList = $('<ul>');
            for (var i = 0; i < obj.children.length; i++) {
                var child = obj.children[i];
                innerList.append(createInner(child));
            };
            li.append(innerList);
        }

        return li;
    }
    for (var i = 0; i < data.length; i++) {
        $e.append(createInner(data[i]));
    }
}

以下数据集已被用作示例-

[
    {
        "text": "item1"
    },
    {
        "text": "item2",
        "children": [
            {
                "text": "subItem",
            },
            {
                "text": "another subItem",
            },
            {
                "text": "last subItem",
            }
        ],
    },
    {
        "text": "item3",
        "children": [
            {
                "text": "Hello",
            },
            {
                "text": "Inner List",
                "children": [
                    {
                        "text": "innerItem1",
                    },
                    {
                        "text": "innerItem2",
                    }
                ]
            },
            {
                "text": "Bye",
            }
        ],
    }
]

写入 item3 的列表项应该有一个包含另外两个子项的内部列表，但它没有发生。标记为 Inner List 的项目未显示在 html 输出中。也没有标记为 Hello 的项目。 item3 仅包含 innerItem1、innerItem2 和 Bye。

我该如何克服这个问题？

Answer 1

您的递归函数可以采用两个参数，而不是尝试追加递归返回的结果。要添加的数据节点和要将结果添加到的父元素。然后他们将在任何深度并行工作：

JSFiddle: http://jsfiddle.net/TrueBlueAussie/r69ex6k3/3/

function generateList(data, $e) {
    // create an inner item
    function createInner(obj, $target) {
        var li = $('<li>').appendTo($target);
        li.text(obj.text);
        if (obj.children != undefined && obj.children.length > 0) {
            var innerList = $('<ul>').appendTo(li);
            for (var i = 0; i < obj.children.length; i++) {
                var child = obj.children[i];
                createInner(child, innerList);
            };
        }
    }
    for (var i = 0; i < data.length; i++) {
        createInner(data[i], $e);
    }
}

结果 HTML 如下所示：

<ul class="sample">
    <li>item1</li>
    <li>item2
        <ul>
            <li>subItem</li>
            <li>another subItem</li>
            <li>last subItem</li>
        </ul>
    </li>
    <li>item3
        <ul>
            <li>Hello</li>
            <li>Inner List
                <ul>
                    <li>innerItem1</li>
                    <li>innerItem2</li>
                </ul>
            </li>
            <li>Bye</li>
        </ul>
    </li>
</ul>

Answer 2

您遇到了一个变量问题，其中 innerList 是一个全局变量。始终在范围的开头定义变量。 (http://javascript.crockford.com/code.html#variable%20declarations)

答案如下：JSFiddle：http://jsfiddle.net/r69ex6k3/5/

只需要稍微清理一下函数 (createInner)

function createInner(obj) {
        var li = $('<li>'),
            innerList,
            child;
        li.text(obj.text);
        if (obj.children && obj.children.length) {
            innerList = $('<ul>');
            for (var i = 0; i < obj.children.length; i++) {
                child = obj.children[i];
                innerList.append(createInner(child));
            };
            li.append(innerList);
        }

        return li;
    }

javascript 中的递归列表生成器函数

Recursive list generator function in javascript

javascript

jquery

web