Javascript 基于菜单项的URL路径结构创建嵌套的UL菜单

我有一个菜单项数组，每个菜单项包含如下名称和URL：

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路径结构，但没有成功，如下所示：

<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中提取这个数据结构并使用它来呈现新的结构

如果有人能指导我如何使用jQuery实现这一点，我将不胜感激。我意识到我可能需要使用一些递归函数或jQuery模板，但这些东西对我来说还是有点陌生。

---

谢谢

它不在jQuery中，但这可能会有所帮助。我是在寻找网络来做你想做的事情之后开发的

---

我认为最好的解决方案是首先将数据结构转换为具有父/子关系的树结构。渲染此结构将更容易，因为UL本身具有树结构

您可以使用这两个函数转换菜单项

// 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 );

---

你提到你已经有了树的html渲染器，对吗？如果您需要进一步的帮助，请告诉我们

试试这样的东西

function Directory(parentNode) {
    //Structure for directories.  Subdirectories container as a generic object, initially empty
    this.hasSubdirectories = false;
    this.subdirectories = {};

    //Render in steps.  Until subdirectories or a link are added, all it needs is an LI and a blank anchor
    this.nodeLi = document.createElement("li");
    parentNode.appendChild(this.nodeLi);
    this.nodeA = document.createElement("a");
    this.nodeLi.appendChild(this.nodeA);

    //if a subdirectory is added, this.nodeUl will be added at the same time.
}

Directory.prototype.setLabel = function (sLabel) {
    this.nodeA.innerHTML = sLabel;
}

Directory.prototype.setLink = function (sLink) {
    this.nodeA.href = sLink;
}

Directory.prototype.getSubdirectory = function (sPath) {
    //if there were no previous subdirectories, the directory needs a new UL node.
    if (!this.hasSubdirectories) {
        this.nodeUl = document.createElement("ul");
        this.nodeLi.appendChild(this.nodeUl);
        this.hasSubdirectories = true;
    }

    //split the path string into the base directory and the rest of the path.
    var r = /^\/?(?:((?:\w|\s|\d)+)\/)(.*)$/;
    var path = r.exec(sPath);

    //if the desired path is in a subdirectory, find or create it in the subdirectories container.

    var subDirName = path[1] || path[2];
    var subDir;
    if (this.subdirectories[subDirName] === undefined) this.subdirectories[subDirName] = new Directory(this.nodeUl);
    subDir = this.subdirectories[subDirName];

    if (path[1] && path[2]) {
        return subDir.getSubdirectory(path[2]);
    } else {
        return subDir;
    }
}

function main(whichNode, aMenuItems) {
    //whichNode is the node that is to be the parent of the directory listing.
    //aMenuItems is the array of menu items.
    var i;
    var l = aItems.length;
    var topDir = new Directory(whichNode);

    //for each menu item, add a directory and set its properties.
    var dirToAdd;
    for (i = 0; i < l; i++) {
        dirToAdd = topDir.getSubdirectory(aMenuItems[i].url);
        dirToAdd.setLabel(aMenuItems[i].name);
        dirToAdd.setLink(aMenuItems[i].url);
    }

    //and that's it.
}

功能目录（父节点）{
//目录的结构。子目录容器作为一般对象，最初为空
this.hasSubdirectories=false；
this.subdirectories={}；
//分步渲染。在添加子目录或链接之前，它只需要一个LI和一个空白锚点
this.nodeLi=document.createElement（“li”）；
parentNode.appendChild（this.nodeLi）；
this.nodeA=document.createElement（“a”）；
this.nodeLi.appendChild（this.nodeA）；
//如果添加了子目录，则会同时添加this.nodeUl。
}
Directory.prototype.setLabel=函数（sLabel）{
this.nodeA.innerHTML=sLabel；
}
Directory.prototype.setLink=函数（sLink）{
this.nodeA.href=sLink；
}
Directory.prototype.getSubdirectory=函数（sPath）{
//如果没有以前的子目录，则该目录需要一个新的UL节点。
如果（！this.hasSubdirectories）{
this.nodeUl=document.createElement（“ul”）；
this.nodeLi.appendChild（this.nodell）；
this.hasSubdirectories=true；
}
//将路径字符串拆分为基本目录和路径的其余部分。
var r=/^\/？（？：（？：\w |\s |\d）+\/）（.*）$/；
var path=r.exec（sPath）；
//如果所需路径位于子目录中，请在子目录容器中查找或创建它。
var subDirName=路径[1]| |路径[2]；
var-subDir；
如果（this.subdirectories[subDirName]==未定义）this.subdirectories[subDirName]=新目录（this.nodeUl）；
subDir=this.subdirectories[subDirName]；
if（路径[1]&路径[2]）{
返回子目录getSubdirectory（路径[2]）；
}否则{
返回子目录；
}
}
主功能（其中有节点、修正项）{
//whichNode是要作为目录列表父级的节点。
//aMenuItems是菜单项的数组。
var i；
var l=长度；
var topDir=新目录（whichNode）；
//对于每个菜单项，添加一个目录并设置其属性。
var dirToAdd；
对于（i=0；i

---

这是如何工作的？

或者可能是完整的jQuery插件

（编辑）

对以前版本的更新

此版本支持以下情况

var menuItems = [  
    {  
        name : "Store",  
        url : "/store"  
    },  
    {  
        name : "Cook Books",  
        url : "/store/healthy-eating/cook-books"  
    },  
    {  
        name : "Single Meal Gifts",  
        url : "/store/healthy-eating/single-meal-gifts"  
    }  
]  

因为有跳过

    {  
        name : "Healthy Eating",  
        url : "/store/healthy-eating"  
    },

它将生成以下html

<ul>
    <li><a href="/store">Store</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>
</ul>

---

我想情况不会是这样，但可能会对某人有所帮助

12行简单的代码：

var rootList = $("<ul>").appendTo("body");
var elements = {};
$.each(menuItems, function() {
    var parent = elements[this.url.substr(0, this.url.lastIndexOf("/"))];
    var list = parent ? parent.next("ul") : rootList;
    if (!list.length) {
        list = $("<ul>").insertAfter(parent);
    }
    var item = $("<li>").appendTo(list);
    $("<a>").attr("href", this.url).text(this.name).appendTo(item);
    elements[this.url] = item;
});

var rootList=$（“
”）.appendTo（“body”）；
var元素={}；
$.each（菜单项，函数（）{
var parent=elements[this.url.substr（0，this.url.lastIndexOf（“/”））；
var list=parent？parent.next（“ul”）：根列表；
如果（！list.length）{
列表=$（“
”）。插入后面（父级）；
}
变量项=$（“
”）。附录（列表）；
$（“
虽然我喜欢gilly3的脚本，但脚本生成的列表中的
和
元素嵌套与最初要求的不同。因此，与


   <li><a href="/store">Store</a>
     <ul>
        <li><a href="/store/travel">Travel</a></li>
        ...
     </ul>
   </li>




...



它产生





...

这可能会导致实用程序或框架与生成的菜单和生成带有动画的交互式菜单（例如superfish.js）不兼容。
所以我更新了12行脚本

var rootList = $("<ul>").appendTo("body");
var elements = {};
$.each(menuItems, function() {
    var parent = elements[this.url.substr(0, this.url.lastIndexOf("/"))];
    var list = parent ? parent.children("ul") : rootList;
    if (!list.length) {
        list = $("<ul>").appendTo(parent);
    }
    var item = $("<li>").appendTo(list);
    $("<a>").attr("href", this.url).text(this.name).appendTo(item);
    elements[this.url] = item;
});

var rootList=$（“
”）.appendTo（“body”）；
var元素={}；
$.each（菜单项，函数（）{
var parent=elements[this.url.substr（0，this.url.lastIndexOf（“/”））；
var list=parent？parent.children（“ul”）：根列表；
如果（！list.length）{
列表=$（“
”）。附录（父项）；
}
变量项=$（“
”）。附录（列表）；
$（“
这非常有效，但有一个‘例外’：如果有一个子节点没有定义父节点，它将像父节点/main节点一样添加。我不知道这是否是一个想要的副作用，但这可能是合理的。很抱歉，这不起作用，我尝试了几次您的代码。它对t工作正常

   <li><a href="/store">Store</a>
   </li>
   <ul>
      <li><a href="/store/travel">Travel</a></li>
      ...
   </ul>
var rootList = $("<ul>").appendTo("body");
var elements = {};
$.each(menuItems, function() {
    var parent = elements[this.url.substr(0, this.url.lastIndexOf("/"))];
    var list = parent ? parent.children("ul") : rootList;
    if (!list.length) {
        list = $("<ul>").appendTo(parent);
    }
    var item = $("<li>").appendTo(list);
    $("<a>").attr("href", this.url).text(this.name).appendTo(item);
    elements[this.url] = item;
});