Creating dropdown menu from simple list

Question

I have current list look like:

   
Menu 1
   
_Submenu a&         


        

Answer 1

You can achieve the effect you're looking for by using the following logic.

1. Create a common cache variable to hold the previous top-level menu.
2. Loop through all menu list items checking to see whether the text begins with an underscore.
   • If it does, append this to the previous top-level menu.
   • If it does not, append a new unordered list element to this list item and cache the new list in the previous top-level menu variable.
3. Once the loop has finished you can select all lists that are empty and remove them (.find('ul:empty').remove()).

In the example below I have favoured Native DOM API methods instead of their jQuery counterparts in a few instances because:

1. $(this).append('
   ') returns $(this) instead of the newly created list. The work around is to add another line of code, or just use the DOM API this.appendChild($('
   ')[0]) which does return the newly created list. And...
   • It just seems wasteful to use jQuery in situations where it is just as simple to use the DOM API. ^{see: youmightnotneedjquery.com}

var prev;
$('.menu li').each(function(){
    if(/^_/.test(this.textContent) && prev) {
        prev.appendChild(this);
    } else {
        prev = this.appendChild($('
')[0]);
    }
}).find('ul:empty').remove();

   
Menu 1
   
_Submenu a
   
_Submenu b
   
_Submenu c
   
Menu 2
   
Menu 3
   
_Submenu x
   
_Submenu y
   
Menu 4

The example above results in the following HTML structure:

    
Menu 1
        

            
_Submenu a
            
_Submenu b
            
_Submenu c
        
    
    
Menu 2
    
Menu 3
        

            
_Submenu x
            
_Submenu y
        
    
    
Menu 4