javascript - 将 Jquery 对象更改为

Question

我有以下 jquery 对象：-

        (function ($) {
            var menu = [{
                title: Main1",
                href: "/"
            }, {
                title: "Main2",
                href: "/main2",
                items: [{
                    title: "SubMain2_1",
                    href: "/subMain2_1"
                }, {
                    title: "SubMain2_2",
                    href: "/subMain2_2"
                }]
            }, {
                title: "Main3",
                href: "/main3",
                items: [{
                    title: "SubMain3_1",
                    href: "/subMain3_1"
                }, {
                    title: "SubMain3_2",
                    href: "/subMain3_2",
                    items: [{
                        title: "SubSubMain3_1",
                        href: "/SubSubMain3_2"
                    }, {
                        title: "SubSubMain3_2",
                        href: "/subSubMain3_2"
                    }]
                }, {
                    title: "SubMain3_3",
                    href: "/subMain3_3"
                }]
            }, {
                title: "Main4",
                href: "/main4"
            }];
        });

我希望将其更改为

   <ul>
     <li class="Main"><a href="/">Main1</a></li>
     <li class="Main"><a href="/main2">Main2</a></li>
     <ul>
        <li class="Sub"><a href="/subMain2_1">SubMain2_1</a></li>
        <li class="Sub"><a href="/subMain2_2">SubMain2_2</a></li>
     </ul>
     <li class="Main"><a href="/main3">Main3</a></li>
     <ul>
        <li class="Sub"><a href="/subMain3_1">SubMain3_1</a></li>
        <li class="Sub"><a href="/subMain3_2">SubMain3_2</a></li>
        <ul>
           <li class="SubSub"><a href="/subSubMain3_1">SubSubMain3_1</a></li>
           <li class="SubSub"><a href="/subSubMain3_2">SubSubMain3_2</a></li>
        </ul>
        <li class="Sub"><a href="/subMain3_3">SubMain3_3</a></li>
     </ul>
     <li class="Main"><a href="/">Main4</a></li>
  </ul>

我怎样才能做到这一点？

感谢您的帮助和时间

Answer 1

您需要使用一个递归函数，每次有一个数组时都会调用它自己items：

$('body').append(fnMenu(menu));

function fnMenu(el){
    var ul = $('<ul>')
    $.each(el, function(){
        var li = $('<li>')
        li.append($('<a>', {text : this.title, href : this.href}));           
        ul.append(li)
        if(this.items) li.after(fnMenu(this.items)); 
    })
    return ul;
}

小提琴：http: //jsfiddle.net/2hP9K/

Answer 2

以此作为参考并继续。

    var  ul = $("<ul>");
        for (var i = 0, l = obj1.length; i < l; ++i) {
            ul.append("<li><a href='" + obj1[i].href + "'>" + obj1[i].title + "</a></li>");
        }
        $("#results").append(ul);    // add the list to the DOM
    });

小提琴

Answer 3

尝试类似：

c = 0; 
function arrayer(rows,classe){
    c++;
    html = "";
    foreach(rows as row){
        html.='<ul class="'+classe+'">';
        if(row['items']!=""){ 
            html.='<li>';
            html.=arrayer(row['items'],'Sub');
            html.='</li>';
        }else{
            html.='<li class="'+row['title']+'" href="'+row['href']+'">'+classe+' '+c+'</li>';
        }
        html.='</ul>';
        return html;
    }
}

称呼：

html_menu = arrayer(menu,'Main');
$('div.menu').append(html_menu);