JSON和Jquery:从嵌套的列表元素创建嵌套的JSON

时间:2011-10-28 17:50:37

标签: javascript jquery json

我创建了这个jsfiddle:http://jsfiddle.net/mfnxm/1/

我正在尝试创建这个JSON:

[{
"link":"/about",
"title":"About",
"nodes":[{
    "link":"/staff",
    "title":"Staff",
    "nodes":[{
        "link":"/heads",
        "title":"Dept Heads"
        },{
        "link":"/support",
        "title":"Support"
        }]
    },{
    "link":"/location",
    "title":"Location"
    }]
},{
"link":"/contact",
"title":"Contact"
}]

从这个无序列表中:

<div id="tree">
    <ul class=".sortable">
        <li><a href="/about">About</a>
            <ul class=".sortable">
                <li><a href="/staff">Staff</a>
                    <ul class=".sortable">
                        <li><a href="/heads">Dept Heads</a></li>
                        <li><a href="/support">Support</a></li>
                    </ul>
                </li>
                <li><a href="/location">Location</a></li>
            </ul>
        </li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</div>

这是迄今为止的javascript(borrowed from here) - 但它并没有为我创建节点元素:

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

// Do something with data
$('#d').text(JSON.stringify(out));

我错过了什么?谢谢!

1 个答案:

答案 0 :(得分:2)

在每次出现时,将class=".sortable"替换为class="sortable"(无句点)。

您还需要将$("#tree ul").children("li").each(function()更改为$("#tree > ul > "li").each(function() {以避免冗余处理。

http://jsfiddle.net/mblase75/mfnxm/2/