Jquery树遍历 – 嵌套的无序列表元素到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",children: [{
                                name: "Grandchild of A",url: "url of Grandchild of A",children: [{
                                           name: "Grand Grand child of A",url: "url of Grand Grand child of A",children: []
                                           }]
                              }]
                   }]
},{
            name: "Item B",url: "url of Item B",children: []
           },{
            name: "Item C",url: "url of Item C",children: []
           }

一些有用的参考：

Javascript解决方案：
Traversing unordered lists using Javascript/Jquery

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

其他参考：

How do I put unordered list items into an array

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

http://jsfiddle.net/CLLts/

http://jsfiddle.net/cWnwt/

有人请帮忙:(
一直在为许多不眠之夜而烦恼..(P.s – 我花了大约40分钟写完整个页面和代码)

谢谢.

解决方法@H_403_36@

啊,一个有趣的小递归运动.我有一个时刻,这就是我将如何做到这一点.这在递归上可以很深层次地运行,但是假设您的数据不够深,无法分解内存(如果浏览器太深,则会在浏览器中出现递归中断).至少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>

原文链接：https://www.f2er.com/jquery/180940.html

Jquery树遍历 – 嵌套的无序列表元素到JSON

猜你在找的jQuery相关文章