Javascript 将Jquery对象更改为

我有以下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>

我怎样才能做到这一点

---

感谢您的帮助和时间

请将此作为参考，然后继续

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

---

您需要使用一个递归函数，该函数每次出现数组项时都会调用自身：

提琴：

试试下面的方法：

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;
    }
}

---

你试过什么了吗？我们可以为您编写代码，但最好先看看您是否付出了努力……这不是jQuery对象。@Toiletduck我正在考虑一个foreach循环，但是我不知道如何在javascript中实现它并编写它。这是我第一次尝试类似的东西，我会从@Johann开始看看Karl Andre的答案。这正是你需要做的。请注意，您需要使用jQuery才能使其正常工作。不仅仅是javascript。谢谢harsha，我会从这里开始这是一个很好的例子+1+1是为了让人敬畏的人格化。这太神奇了。由于某些原因，它不能在我的html页面中工作。@Johann介意给我看一下你的页面吗？如果你在当地工作，你能打个电话吗？嗨，卡尔，可以吗？

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