Question

我设置了一个小提琴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中的递归列表生成器函数

2 个答案: