4 
<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 を正常に生成しています - 一般的なソリューションが必要です。このソリューションのもう1つの問題は、同じノードが何度も繰り返されることです。助けてください、私は自分のプロジェクトで立ち往生しています。

4

1 に答える 1

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

フィドル

于 2013-09-13T16:22:53.777 に答える