Javascript 在JQ中打印obj数组

首先要说的是，我对JQ和JS还不熟悉，我需要一些帮助。 如何打印此阵列

var menu = [
            {
                name: 'Item1',
                submenuName: 'submenu-1',
                subMenu:[
                         {
                            name: 'Item1_1',
                            submenuName: 'submenu-1-1',
                            subMenu:[
                                 {
                                    name: 'Item1_1_1',
                                    submenuName: 'submenu-1-1-1',
                                    subMenu:[
                                             {
                                                name: 'Item1_1_1_1',
                                                submenuName: 'submenu-1-1-1-1',
                                                subMenu:[
                                                         {
                                                            name: 'Item1_1_1_1_1',
                                                            //submenuName: 'submenu-1-1-2',
                                                         },
                                                ]
                                             },
                                             {
                                                name: 'Item1_1_1_2',
                                                //submenuName: 'submenu-1-1-2',
                                             }
                                    ]
                                 },
                                 {
                                    name: 'Item1_1_2',
                                    //submenuName: 'submenu-1-1-2',
                                 },
                            ]
                         },
                         {
                            name: 'Item1_2',
                            //submenuName: 'submenu-1-2',
                         },
                         {
                            name: 'Item1_3',
                            //submenuName: 'submenu-1-3',
                         }
                ]
            },
            {
                name: 'Item2',
                //submenuName: 'submenu-2',
            }
];

在html中这样查看

<ul data-menu="main" class="menu__level">
    <li class="menu__item"><a class="menu__link" data-submenu="submenu-1" href="#">Item1</a></li>
        <ul data-menu="submenu-1" class="menu__level">
            <li class="menu__item"><a class="menu__link" data-submenu="submenu-1-1" href="#">Item1_1</a></li>
                <ul data-menu="submenu-1-1" class="menu__level">
                    <li class="menu__item"><a class="menu__link" data-submenu="submenu-1-1-1" href="#">Item1_1_1</a></li>   
                        <ul data-menu="submenu-1-1-1" class="menu__level">
                            <li class="menu__item"><a class="menu__link" data-submenu="submenu-1-1-1-1" href="#">Item1_1_1_1</a></li>
                                <ul data-menu="submenu-1-1-1-1" class="menu__level">
                                    <li class="menu__item"><a class="menu__link" href="#">Item1_1_1_1_1</a></li>
                                </ul>

                            <li class="menu__item"><a class="menu__link" href="#">Item1_1_1_2</a></li>
                        </ul>
                    <li class="menu__item"><a class="menu__link" href="#">Item1_1_2</a></li>
                </ul>
            <li class="menu__item"><a class="menu__link" href="#">Item1_2</a></li>
            <li class="menu__item"><a class="menu__link" href="#">Item1_3</a></li>

        </ul>
        <li class="menu__item"><a class="menu__link" href="#">Item2</a></li>
</ul>

我知道我的问题很愚蠢，但我不知道该怎么回答。这将是一个下拉菜单。

带递归：

函数getmenuhtmlar，名称{ var结果=； 对于变量i=0；i此函数将构造该菜单：

// createMenu takes an array of objects m and a menuname to be set as data-menu attribute
function createMenu(m, menuname){
    // create the ul
    var ul = document.createElement("ul");
    // if we are at depth 0 then the data-menu should be 'main', else it should be 'submenu-???' depending on the depth
    ul.setAttribute("data-menu", menuname);
    ul.className = "menu__level";

    // now for every object in the menu (m array), create an li element
    m.forEach(function(e){
        // create the li
        var li = document.createElement("li");
        li.className = "menu__item";

        // create the link
        var a = document.createElement("a");
        // set its data-submen attribute and href and text content as well
/******* ONLY IF IT HAS A SUB-MENU *************/
        if(e.subMenu)
            a.setAttribute("data-submenu", e.submenuName);
        a.setAttribute("href", "#");
        a.textContent = e.name;

        // append the link to the li
        li.appendChild(a);

        // append the li to the ul
        ul.appendChild(li);

        // if this object contains a subMenu the create it using createMenu with e.submenuName as menuname 
        if(e.subMenu)
            // if you want it to be appended to the li instead of its parent change 'ul.ap...' to 'li.ap...'
            ul.appendChild(createMenu(e.subMenu, e.submenuName));
    });

    // return the ul element
    return ul;
}

注意：它应该像createMenumenu，main那样调用；其中第一个参数是对象数组，第二个主参数是第一个ul的数据菜单

注2:createMenu返回一个ul元素，因此您可以将其附加到另一个元素容器中，如下所示：

// create the menu
var myMenuUl = createMenu(menu, "main");
// append it to an element (the body for example)
document.body.appendChild(myMenuUl);

---

这是一个替代解决方案，使用两个Javascript模板引擎和一种递归形式的模板组合：和。jsRender检测jQuery，它们都可以在没有jQuery的情况下使用

数据子菜单属性将添加到菜单链接中，而has子菜单类仅在适当时添加到菜单项中

注意：我已经修改了原始的目标HTML，没有将元素ul包含为另一个元素ul的子元素。例如，请参阅第一个元素，这将是无效的HTML检查验证器

//获取已编译的jsRender模板。 var tmpl=$.templatesentryPointTemplate； //获取编译的把手模板。 var tmplhandlebasentrypoint=$entryPointTemplate-handlebar.html var tmplHandlebarsRenderFunction=handlebar.compiletmplHandlebarsEntryPoint； //注册子模板把手部分。 Handlebars.registerPartialsubMenuTemplate，$subMenuTemplate-Handlebars.html； var菜单=[//源数据。 { 名称：'Item1'， 子菜单名：“子菜单-1”， 子菜单：[{ 名称：'Item1_1'， 子菜单名：“子菜单-1-1”， 子菜单：[{ 名称：'Item1_1_1'， 子菜单名：“子菜单-1-1-1”， 子菜单：[{ 名称：'Item1_1_1_1'， 子菜单名：“子菜单-1-1-1-1'， 子菜单：[{ 名称：'Item1_1_1_1_1'， //子菜单名：“子菜单-1-1-2”， }, ] }, { 名称：'Item1_1_1_2'， //子菜单名：“子菜单-1-1-2”， }] }, { 名称：“项目1\u 1\u 2”， //子菜单名：“子菜单-1-1-2”， }, ] }, { 名称：'Item1_2'， //子菜单名：“子菜单-1-2”， }, { 名称：'Item1_3'， //子菜单名：“子菜单-1-3”， }] }, { 名称：'Item2'， //子菜单名：“子菜单-2”， } ]; //为了方便使用模板引擎，请以这种方式包装数据，请参见：`{for data}}`和`{each data}}`。 风险值数据={ 数据：菜单 } //使用数据呈现jsRender模板。 var htmlJsrender=tmpl.renderdata； //使用数据渲染把手模板。 var htmlHandlebars=tmplHandlebarsRenderFunctiondata； //将jsRender HTML呈现的文本插入DOM。 $result-jsrender.htmlhtmlJsrender； //将由Handlebar呈现的HTML插入DOM。 $result-handlebar.htmlhtmlhandlebar； jsRender输出：

{{if子菜单} {{对于子菜单tmpl='subminutemplate'/} {{/if} {{对于数据tmpl='subminTemplate'/} 车把输出：

{{if子菜单} {{each subMenu}{{>submentumplate}{{{/each}} {{/if} {{每个数据}{>子模板}{{{/每个}}

---

谢谢还有一个问题，我有一个课后设置->如果它有一个子菜单。如果没有子菜单，我怎么能不设置after呢？@PeyoPeev我不明白，你能再解释一下吗？在每个菜单都有子菜单之后，我在课后放了一个->。如何使类仅显示在具有子菜单的菜单中？我将用一张图片展示它。Item2没有子菜单，但它有一个课后/3点/。如何使该类仅对具有子类的项显示-menu@PeyoPeev这个班到底在哪里？我在问题中提供的数组中看不到它。它是一个css类。“。菜单链接[数据子菜单]：：{content:'\e904'；字体系列：'feather'；位置：绝对；右：0；填充：0.25em 1.25em；颜色：87b5ff；}