jQuery树遍历-将嵌套的无序列表元素嵌套到JSON

小编典典

jQuery树遍历-将嵌套的无序列表元素嵌套到JSON

json

好的，现在我这里有一个无序列表：

<ul id="mycustomid">
    <li><a href="url of Item A" title="sometitle">Item A</a>
        <ul class="children">
           <li><a href="url of Child1 of A" title="sometitle">Child1 of A</a>
               <ul class="children">
                 <li><a href="url of Grandchild of A" title="sometitle">Grandchild of A</a>
                    <ul class="children">
                       <li><a href="url of Grand Grand child of A" title="sometitle">Grand Grand child of A</a></li>
                    </ul>
                </li>
               </ul>
           </li>
        </ul>
    </li>
    <li><a href="url of Item B" title="sometitle">Item B</a></li>
    <li><a href="url of Item C" title="sometitle">Item C</a></li>
</ul>

基本上，我只想将此数据转换为JSON实体。我想在 Jquery中
完成此操作，而且我觉得我很难过。上面的列表只是一个例子，实际上，我的列表理想情况下将有更多的孩子，并且深度可能是n级（意思是，它将有孙子孙的孙子……或更多）我失去了无数数小时的睡眠，我不认为我会去任何地方:(

我想提取这些东西：锚点内的文本，锚点的url和锚点的标题，并将它们放到JSON实体中

我上面的列表的JSON格式是这样的：

{
        name: "Item A",
        url: "url of Item A",
        title: "sometitle",
        children: [{
                   name: "Child1 of A",
                   url: "url of Child1 of A",
                   title: "sometitle",
                   children: [{
                                name: "Grandchild of A",
                                url: "url of Grandchild of A",
                                title: "sometitle",
                                children: [{
                                           name: "Grand Grand child of A",
                                           url: "url of Grand Grand child of A",
                                           title: "sometitle",
                                           children: []
                                           }]
                              }]
                   }]
},
           {
            name: "Item B",
            url: "url of Item B",
            title: "sometitle",
            children: []
           },
           {
            name: "Item C",
            url: "url of Item C",
            title: "sometitle",
            children: []
           }

一些有用的参考：

^这可能有效，但是我需要的JSON输出格式如上所示，而不是此脚本输出的内容:(

其他参考：

http://jsfiddle.net/yS6ZJ/1/

http://jsfiddle.net/CLLts/

http://jsfiddle.net/cWnwt/

有人请帮忙:(

谢谢。

阅读 278

2020-07-27

共1个答案

小编典典

嗯，一个有趣的小递归练习。我花了一点时间，这就是我的做法。这可以递归地深入许多级别，但是假定您的数据不够深而无法爆炸内存（如果浏览器的深度太深，则递归会中断）。至少应保持10级左右的罚款。

我对此进行了测试，似乎可以正常工作，只需将其保存在HTML文件中就可以了。

抱歉，注释不太多（从技术上来说，没有任何注释：），这是假定您阅读jQuery和JS代码很好。如果您有任何疑问，请在评论中提问，我们乐于解释。

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Recursive list processor example</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">

$(document).ready(function() {

    var out = [];

    function processOneLi(node) {

        var aNode = node.children("a:first");
        var retVal = {
            "title": aNode.attr("title"),
            "url": aNode.attr("href"),
            "name": aNode.text()
        };

        node.find("> .children > li").each(function() {
            if (!retVal.hasOwnProperty("children")) {
                retVal.children = [];
            }
            retVal.children.push(processOneLi($(this)));
        });

        return retVal;
    }

    $("#mycustomid").children("li").each(function() {
        out.push(processOneLi($(this)));
    });


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

});

    </script>
</head>
<body>
<ul id="mycustomid">
    <li><a href="http://example.com/urlOfItemA" title="sometitle">Item A</a>
        <ul class="children">
           <li><a href="http://example.com/urlOfItemAChild1" title="sometitle">Child1 of A</a>
               <ul class="children">
                 <li><a href="http://example.com/urlOfItemAGrandchild" title="sometitle">Grandchild of A</a>
                    <ul class="children">
                       <li><a href="http://example.com/urlOfItemAGrandGrandChild" title="sometitle">Grand Grand child of A</a></li>
                    </ul>
                </li>
               </ul>
           </li>
        </ul>
    </li>
    <li><a href="http://example.com/urlOfItemB" title="sometitle2">Item '"" B</a></li>
    <li><a href="http://example.com/urlOfItemC" title="sometitle3">Item C</a></li>
</ul>
</body>
</html>

2020-07-27