使用 jQuery 遍历树

Question

<ul  id="org" style="display:none">
<li id="visited"><a href="#" class="ui-link">ROOT</a>
               <ul id="main_child_ul" class="children">
               <li><a href="#">Acura</a>
                    <ul>
                        <li><a href="#">Audi</a>
                            <ul>
                            <li><a href="#">BMW</a>
                                <ul>
                                    <li><a href="#">Ferrari</a></li>
                                </ul>
                            </li>
                            </ul>
                        </li>
                    </ul>
               </li>
               <li><a href="#">Cadillac</a>
                    <ul>
                        <li><a href="#">Acura1</a>
                            <ul>
                                <li><a href="#">Audi1</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">BMW1</a></li>
                <li><a href="#">Cadillac1</a>
                    <ul>
                        <li><a href="#">Ferrari1</a></li>
                    </ul>
                </li>
                </ul>
</li>
</ul>

这是我的 html UL LI 树结构。

我想生成这种树结构的 JSON。此列表是动态生成的。

我正在使用 jquery - 这是我的代码 - 我从这篇文章中获得帮助 here -

function processOneLi(node) {       
        var aNode = node.children("a:first");
        var retVal = {
            "link": aNode.attr("href"),
            "title": aNode.text()
        };
        node.find("> .children > li").each(function() {
            if (!retVal.hasOwnProperty("nodes")) {
                retVal.nodes = [];
            }
            retVal.nodes.push(processOneLi($(this)));
        });
        return retVal;
    }

 function json_output()
    {
        $("#org > li").each(function() {
            out.push(processOneLi($(this)));
        });

        console.log("got the following JSON from your HTML:", JSON.stringify(out));
    }

这只会为较小的树生成 json - 我想要通用的解决方案。该解决方案中的另一个问题是它多次重复相同的节点。请帮忙，我被困在我的项目中。

Answer 1

这样的？

function generateTree($node, result) {
    result = result || {'nodes' : []};
    $node.children('li').each(function(){
        var $this = $(this);
        var anch = $this.children('a').get(0);
        var elem = {
            "link": anch.href,
            "title": anch.innerHTML,
            "nodes" : []
        };

        if($this.has('ul'))
            generateTree($this.children('ul'), elem);
        result.nodes.push(elem);
    });
    return result.nodes; //or just return result.nodes[0] to access the root as object. But the existing one will be generic in case you are setting up for a class selector for multiple ul's as root.
}

调用它为

var resTree = generateTree($("#org"));
console.log(JSON.stringify(resTree));

Fiddle