Как добавить подменю под подменю динамически с помощью jquery?

Question

Мне нужно создать следующую структуру меню динамически, используя jquery.

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

в подменю моем случае системы {пользователь, группа, аКЛ} попадает под установкой вместо системного меню.

У меня есть код, написанный в моем .js файле.

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

этот код генерировать bellow html фрагмент.

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

, как вы можете видеть здесь, <li> заявление субменю генерируемой в неправильном пути, он должен прийти под правильным меню, как последние три заявления пользователя, группы и ACL должны подпадать под систему.

Ожидаемый результат:

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

пожалуйста, помогите мне понять этот вопрос.

Answer 1

Причина, по которой ваши элементы меню не вложены правильно, вы не строите вложенные элементы <ul> в свой код, вы просто пытаетесь вложить <li> элементов с другими элементами <li>. Каждое подменю должно быть новым неупорядоченным списком, вложенным в предыдущий неупорядоченный список.