如何使用jQuery动态在子菜单下添加子菜单？

Question

i need to create following menubar structure dynamically using jquery.

-Setting
--System
---user
---group
---acl
--Vresource
---vms
---vnet-conf
--Configuration
---template
---image

in my case system's submenu{user,group,acl} falls under setting instead of System menu.

i've bellow code written in my .js file.

 var li_item = '<li id="li_'+tab_name+'" class="'+tabClass+' '+parent+'"><a href="#">'+tab_info.title+'<span class="icon-caret-left icon-large plusIcon right"></span></a></li>';

    //if this is a submenu... div#menu ul#navigation li.vresources-tab
    if (parent.length) {
        var children = $('div#menu ul#navigation li.'+parent);

        //if there are other submenus, insert after last of them
        if (children.length){
            $(children[children.length-1]).after(li_item);
        }else{ //instert after parent menu
            $('div#menu ul#navigation li#li_'+parent).after(li_item);
        }
    } else { //not a submenu, instert in the end
        $('div#menu ul#navigation').append(li_item);
    };

this code generate bellow html snippet.

<div class="menu-navZ">
<ul id="navigation" class="tabs vertical">
<li id="li_settings-tab" class="topTab tab_with_no_content">
<li id="li_system-tab" class="subTab topTab tab_with_no_content settings-tab" style="display: none;">
<li id="li_vresources-tab" class="subTab topTab tab_with_no_content settings-tab" style="display: none;">
<li id="li_configuration-tab" class="subTab topTab tab_with_no_content settings-tab" style="display: none;">
<li id="li_templates-tab" class="subTab subsubTab configuration-tab" style="display: none;">
<li id="li_images-tab" class="subTab subsubTab configuration-tab" style="display: none;">
<li id="li_vms-tab" class="subTab subsubTab vresources-tab" style="display: none;">
<li id="li_vnetconf-tab" class="subTab subsubTab topTab vresources-tab" style="display: none;">
<li id="li_users-tab" class="subTab subsubTab system-tab" style="display: none;">
<li id="li_groups-tab" class="subTab subsubTab system-tab" style="display: none;">
<li id="li_acls-tab" class="subTab subsubTab system-tab" style="display: none;">
</ul>
</div>

as you can see here, <li> statement of sub menu generated in incorrect way, it should come under the proper menu like last three statements user,group and acl should come under system.

Expected output :

<div class="menu-navZ">
<ul id="navigation" class="tabs vertical">
<li id="li_settings-tab" class="topTab tab_with_no_content">
<li id="li_system-tab" class="subTab topTab tab_with_no_content settings-tab" style="display: none;">
<li id="li_users-tab" class="subTab subsubTab system-tab" style="display: none;">
<li id="li_groups-tab" class="subTab subsubTab system-tab" style="display: none;">
<li id="li_acls-tab" class="subTab subsubTab system-tab" style="display: none;">

<li id="li_vresources-tab" class="subTab topTab tab_with_no_content settings-tab" style="display: none;">
<li id="li_vms-tab" class="subTab subsubTab vresources-tab" style="display: none;">
<li id="li_vnetconf-tab" class="subTab subsubTab topTab vresources-tab" style="display: 

<li id="li_configuration-tab" class="subTab topTab tab_with_no_content settings-tab" style="display: none;">
<li id="li_templates-tab" class="subTab subsubTab configuration-tab" style="display: none;">
<li id="li_images-tab" class="subTab subsubTab configuration-tab" style="display: none;">
none;">
</ul>
</div>

please help me figure out this issue.

Answer 1

The reason your menu elements aren't nesting properly is you're not building nested <ul> elements in your code, you're just trying to nest <li> elements with other <li> elements. Each sub-menu should be a new unordered list nested inside the previous unordered list.