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 :(
我想提取这些东西:锚点内的文本，锚点的url和锚点的标题，并将它们放到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屋！
