javascript – JSON和Jquery：从嵌套列表元素创建嵌套JSON

2023年11月13日 226次阅读

我创建了这个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));

我错过了什么？谢谢！

最佳答案 在每次出现时,用class =“sortable”(无句点)替换HTML中的class =“.sortable”.

你还需要改变$(“#tree ul”).children(“li”).each(function()to $(“#tree> ul>”li“).each(function(){to avoid冗余处理.

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

点赞