Question

Having the following structure:

<div id="block1">
   <ul class="category">
      <li>Comedy</li>
   </ul>
</div>

<div id="block2">
   <ul class="category">
       <li>Comedy</li>
       <li>Drama</li>
   </ul>
</div>

The unordered list category is generated with a php foreach(), and in some blocks the ul may contain 1 li and in others 2, 3 or X li, so I need to convert those extra lis in a submenu with the first li on top.

• My question is, how to select the rest of the <li> that’s after the first one? Because once I have the rest of the li, I can wrap them inside another ul and build the submenu.

I can use the following code to filter the lists with more than an option, but what then?

    $('.categories').filter(function() {
        if($(this).children("li").length > 1) {
            console.log($(this).text());
        }
    });

Answer 1

You can use wrapAll method.

$('ul.category').each(function(){
  $('li:gt(0)', this).wrapAll('<ul/>')
})