jQuery 树遍历 - 将无序列表元素嵌套到 JSON [英] jQuery tree traversal - Nested Unordered list elements to JSON
问题描述
好的，现在我这里有一个无序列表:
Okay, Now I have an unordered list here:
<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"级深(意思是，它将有孙辈的孙辈……或更多)我已经失去了无数在这上面睡了几个小时，我不认为我要去任何地方:(
Basically, I want to just convert this data into a JSON entity. I want to get this done in jQuery and I think I'm having a really tough time doing it. The above list is just an example and in reality, my list would ideally have more number of children and probably be 'n' levels deep (Meaning, it will have grandchildren of grandchildren of grandchildren...or more) I've lost countless hours of sleep on this and I don't think I'm going anywhere :(
我想提取这些东西:anchor里面的文本，anchor的url和anchor的标题，并把它们放到一个JSON实体上
I want to extract these things: The text inside the anchor, the url of the anchor and the title of the anchor and put them onto a JSON entity
我上面列表的 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: []
}
一些有用的参考:
Javascript 解决方案:使用 Javascript/Jquery 遍历无序列表
^ 这个可能有效，但我需要的 JSON 输出格式如上所示，而不是该脚本输出的格式 :(
^ This one probably works, but the format of the JSON output I need is as shown above and not what this script outputs :(
其他参考资料:
有人请帮忙:(
无数个不眠之夜一直让我头疼..(P.s - 我花了大约 40 多分钟才写完这整个页面和代码)
Someone please help :(
Been breaking my head for many many sleepless nights..(P.s - It took me about 40+ mins to write this entire page along with the code)
推荐答案
啊，一个有趣的小递归练习.我有一点时间来做这件事，这就是我的方法.这可以递归地进行许多级别的深度工作，但假设您的数据深度不足以爆炸内存(如果太深，浏览器中的递归会中断).至少 10 级左右应该没问题.
Ah, a fun little recursive exercise. I had a moment for this and here’s how I would do it. This works many levels deep recursively, but assumes that your data is not deep enough to explode the memory (recursion breaks in browsers if it is too deep). Should be fine for at least 10 levels or so.
我对此进行了测试，似乎有效，只需将其保存在 HTML 文件中即可.
I tested this out, seems it works, just save this in a HTML file and you should be fine.
抱歉，没有太多评论(好吧，从技术上讲，根本没有:)，这假设您阅读了 jQuery 和 JS 代码.如果您有任何问题，请在评论中提问，我很乐意为您解释.
Sorry there are not too many comments (well, technically speaking, none at all :) , this assumes you read jQuery and JS code fine. If you have questions, just ask in a comment and I’d be happy to explain.
<!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>
这篇关于jQuery 树遍历 - 将无序列表元素嵌套到 JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
