根据菜单项的URL路径结构创建嵌套的UL菜单 [英] Create a nested UL menu based on the URL path structure of menu items
问题描述
我有一系列菜单项，每个菜单项包含名称和URL，如下所示：
I have an array of menu items, each containing Name and URL like this:
var menuItems = [
{
name : "Store",
url : "/store"
},
{
name : "Travel",
url : "/store/travel"
},
{
name : "Gardening",
url : "/store/gardening"
},
{
name : "Healthy Eating",
url : "/store/healthy-eating"
},
{
name : "Cook Books",
url : "/store/healthy-eating/cook-books"
},
{
name : "Single Meal Gifts",
url : "/store/healthy-eating/single-meal-gifts"
},
{
name : "Outdoor Recreation",
url : "/store/outdoor-recreation"
},
{
name : "Hiking",
url : "/store/outdoor-recreation/hiking"
},
{
name : "Snowshoeing",
url : "/store/outdoor-recreation/hiking/snowshoeing"
},
{
name : "Skiing",
url : "/store/outdoor-recreation/skiing"
},
{
name : "Physical Fitness",
url : "/store/physical-fitness"
},
{
name : "Provident Living",
url : "/store/provident-living"
}
]
我一直在努力将此作为无序列表呈现为嵌套的UL结构，遵循URL路径结构，如下所示：
I've been trying with no success to render this as an unordered list with a nested UL structure that follows the URL path structure like so:
<ul>
<li><a href="/store">Store</a>
<ul>
<li><a href="/store/travel">Travel</a></li>
<li><a href="/store/gardening">Gardening</a></li>
<li><a href="/store/healthy-eating">Healthy Eating</a>
<ul>
<li><a href="/store/healthy-eating/cook-books">Cook Books</a></li>
<li><a href="/store/healthy-eating/single-meal-gifts">Single Meal Gifts</a></li>
</ul>
</li>
<li><a href="/store/outdoor-recreation">Outdoor Recreation</a>
<ul>
<li><a href="/store/outdoor-recreation/hiking">Hiking</a>
<ul>
<li><a href="/store/outdoor-recreation/hiking/snowshoeing">Snowshoeing</a></li>
</ul>
</li>
<li><a href="/store/outdoor-recreation/skiing">Skiing</a></li>
</ul>
</li>
<li><a href="/store/physical-fitness">Physical Fitness</a></li>
<li><a href="/store/provident-living">Provident Living</a></li>
</ul>
</li>
</ul>
我见过的所有例子都以反映父子关系的数据结构开头（例如xml或JSON），但我很难将其从URL中拉出来并使用它来呈现新结构。
All of the examples I've seen begin with a data structure that reflects the parent-child relationship (e.g. xml or JSON), but I'm having a very difficult time pulling this out of the URL and using it to render the new structure.
如果有人可以请我指导我使用jQuery如何做到这一点，我真的很感激。我意识到我可能需要使用一些递归函数或jQuery模板，但这些对我来说仍然有点新鲜。
谢谢
If anyone could please steer me in the right direction for how to do this using jQuery, I'd really appreciate it. I realize I probably need to use some recursive functions or maybe jQuery templates, but these things are still a bit new to me.
Thanks
推荐答案
我认为最好的解决方案是首先将您的数据结构转换为具有父/子关系的树。渲染此结构将更容易，因为UL本身具有树结构。
I think the best solution is firstly to convert your data structure to a tree one, with parent/children relations. Render this structure will then be easier, as the UL itself has a tree structure.
您可以使用这些函数转换menuItems
You can convert menuItems using these couple of functions
// Add an item node in the tree, at the right position
function addToTree( node, treeNodes ) {
// Check if the item node should inserted in a subnode
for ( var i=0; i<treeNodes.length; i++ ) {
var treeNode = treeNodes[i];
// "/store/travel".indexOf( '/store/' )
if ( node.url.indexOf( treeNode.url + '/' ) == 0 ) {
addToTree( node, treeNode.children );
// Item node was added, we can quit
return;
}
}
// Item node was not added to a subnode, so it's a sibling of these treeNodes
treeNodes.push({
name: node.name,
url: node.url,
children: []
});
}
//Create the item tree starting from menuItems
function createTree( nodes ) {
var tree = [];
for ( var i=0; i<nodes.length; i++ ) {
var node = nodes[i];
addToTree( node, tree );
}
return tree;
}
var menuItemsTree = createTree( menuItems );
console.log( menuItemsTree );
生成的menuItemsTree将是这样的对象
The resulting menuItemsTree will be an object like this
[
{
"name":"Store",
"url":"/store",
"children":[
{
"name":"Travel",
"url":"/store/travel",
"children":[
]
},
{
"name":"Gardening",
"url":"/store/gardening",
"children":[
]
},
{
"name":"Healthy Eating",
"url":"/store/healthy-eating",
"children":[
{
"name":"Cook Books",
"url":"/store/healthy-eating/cook-books",
"children":[
]
},
{
"name":"Single Meal Gifts",
"url":"/store/healthy-eating/single-meal-gifts",
"children":[
]
}
]
},
{
"name":"Outdoor Recreation",
"url":"/store/outdoor-recreation",
"children":[
{
"name":"Hiking",
"url":"/store/outdoor-recreation/hiking",
"children":[
{
"name":"Snowshoeing",
"url":"/store/outdoor-recreation/hiking/snowshoeing",
"children":[
]
}
]
},
{
"name":"Skiing",
"url":"/store/outdoor-recreation/skiing",
"children":[
]
}
]
},
{
"name":"Physical Fitness",
"url":"/store/physical-fitness",
"children":[
]
},
{
"name":"Provident Living",
"url":"/store/provident-living",
"children":[
]
}
]
}
]
你提到你已经有了树的html渲染器，对吧？如果您需要进一步的帮助，请告诉我们！
You mentioned you already have html renderer for trees, right? If you need further help let us know!
这篇关于根据菜单项的URL路径结构创建嵌套的UL菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
