¿Cómo hacer un list-child con javascript y jQuery?

Hola a todos, quiero hacer una list de un código corto

Quiero moverme (con javascript o jQuery) desde aquí:

<ul id='nav'> <li><a href='#'>Home</a></li> <li><a href='#'>Sub-menu</a></li> <li><a href='#'>_Sub-Menu child 1</a></li> <li><a href='#'>_Sub-Menu child 2</a></li> <li><a href='#'>_Sub-Menu child 3</a></li> <li><a href='#'>__Sub-Menu child 3.1</a></li> <li><a href='#'>__Sub-Menu child 3.2</a></li> <li><a href='#'>__Sub-Menu child 3.3</a></li> <li><a href='#'>Example</a></li> </ul> 

A esto :

 <ul id='nav'> <li><a href='#'>Home</a></li> <li class='hasSub1'> <a href='#'>Sub-menu</a> <ul class='subMenu1'> <li><a href='#'>Sub-Menu child 1</a></li> <li><a href='#'>Sub-Menu child 2</a></li> <li class='hasSub2'> <a href='#'>Sub-Menu child 3</a> <ul class='subMenu2'> <li><a href='#'>Sub-Menu child 3.1</a></li> <li><a href='#'>Sub-Menu child 3.2</a></li> <li><a href='#'>Sub-Menu child 3.3</a></li> </ul> </li> </ul> </li> <li><a href='#'>Example</a></li> </ul> 

El Método es cuando alguien hace una list y usa "_" esta segunda list dentro de la list anterior o el doble de "__" como el ejemplo que hago, y también podemos hacer una list infinita como este método no solo una vez .

Traté de hacer el primer nivel del script _ Esto es lo que hago:

 <script> $("#LinkList1").each(function() { var e = "<ul id='nav'><li><ul id='sub-menu'>"; $("#LinkList1 li").each(function() { var t = $(this).text(), n = t.substr(0, 1), r = t.substr(1); "_" == n ? (n = $(this).find("a").attr("href"), e += '<li><a href="' + n + '" class="list-name"><span class="lint-span">' + r + "</span></a></li>") : (n = $(this).find("a").attr("href"), e += '</ul></li><li><a href="' + n + '" class="list-name"><span class="lint-span">' + t + "</span></a><ul id='sub-menu'>") }); e += "</ul></li></ul>"; $(this).html(e); $("#LinkList1 ul").each(function() { var e = $(this); if (e.html().replace(/\s|&nbsp;/g, "").length == 0) e.remove() }); $("#LinkList1 li").each(function() { var e = $(this); if (e.html().replace(/\s|&nbsp;/g, "").length == 0) e.remove() }) });$('#sub-menu').parent().addClass('hasSub'); </script> 

Tenga en count que: # LinkList1 es un elemento Div (Parent of All) y acaba de agregar una class y span en el elemento, pero cuando traté de hacer el segundo Level __ (two _) no me funciona a la perfección cuando todos una list múltiple

He creado una function con cada <a> en su list de menu de navigation.

Por favor intente abajo:

 $(document).ready(function () { var list = $("<ul />"); $("ul#nav a").each(function(i,e){ var iter = $($(this).html().match(/\_/g)).length; var href = $(this).attr("href"); if(iter>0){ if(list.find("ul").hasClass("subMenu"+iter)){ list.find(".subMenu" + iter).append("<li><a href='"+ href +"'>" + $(this).text().substr(iter) + "</a></li>"); }else{ list.find("li").last().append("<ul class='subMenu"+iter+"'><li><a href='"+ href +"'>" + $(this).text().substr(iter) + "</a></li></ul>").addClass("hasSub"+iter); } }else{ list.append("<li><a href='"+href+"'>" + $(this).text() + "</a></li>"); } }) $("#nav").empty().append(list); }) 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id='nav' > <li><a href='#'>Home</a></li> <li><a href='#'>Sub-menu</a></li> <li><a href='#'>_Sub-Menu child 1</a></li> <li><a href='#'>_Sub-Menu child 2</a></li> <li><a href='#'>_Sub-Menu child 3</a></li> <li><a href='#'>__Sub-Menu child 3.1</a></li> <li><a href='#'>__Sub-Menu child 3.2</a></li> <li><a href='#'>__Sub-Menu child 3.3</a></li> <li><a href='#'>___Sub-Menu child 3.3.1</a></li> <li><a href='#'>Example</a></li> </ul> 

Piensa que esto te ayudará …: D

 function changer(){ var first = $('#nav li'); var inserter = ''; var _counter,prev = 0; while(typeof first.html() != "undefined"){ var len = $(first.html().match(/\_/g)).length; if(len>prev) while(len>prev){inserter += '<ul clas="Submenu'+len+'">';prev++;} else if(len<prev) while(len<prev){inserter += '</ul>';prev--;} inserter += '<li>'+first.html().replace(/\_/g,'')+'</li>'; first = first.next(); } while(prev>0){insert += "</ul>";prev--;} $('#nav').empty().append(inserter); } $(document).ready(function(){ changer(); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id='nav'> <li><a href='#'>Home</a></li> <li><a href='#'>Sub-menu</a></li> <li><a href='#'>_Sub-Menu child 1</a></li> <li><a href='#'>_Sub-Menu child 2</a></li> <li><a href='#'>_Sub-Menu child 3</a></li> <li><a href='#'>__Sub-Menu child 3.1</a></li> <li><a href='#'>__Sub-Menu child 3.2</a></li> <li><a href='#'>__Sub-Menu child 3.3</a></li> <li><a href='#'>Example</a></li> </ul> 

¿Quiere decir que cuando presiona, por ejemplo, "hasSub1", se expande y muestra "subMenu1" (que estaba oculto antes)?

 Jquery: $(document).ready(function(){ $( "a" ).click(function() { $(this).siblings().toggle(); }); });