使用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 - 這是我的代碼 - 我在這里得到了這篇文章的幫助 -

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));

小提琴