jQuery split long ul list in smaller lists with div

Question

I found this solution is working well with ul to li.

This is my code :

    <div id="submenu-last" class="popover">
        <div class="popover-content">
            <div class="listCol">
                <ul id="bigList">
                    <% _.each(depList.getAll(),function(dep){ %>
                        <li><a href="#"><%=dep.Name%></a></li>
                    <% }); %>
                </ul>
            </div>
        </div>
    </div>

   $(document).ready(function () {
        $(function(){
          var $bigList = $('#bigList'), group;
          while((group = $bigList.find('li:lt(20)').remove()).length){
            $('<div class="listCol"><ul>').append(group).appendTo($('.popover-content'));
          }
   });

This is the result :

What I expected :

 <div class="popover-content">
    <div class="listCol">
    <ul>
        <li>Cate1</li>
        <li>Cate2</li>
        ................
    </ul>
  </div>    
  <div class="listCol">
    <ul>
        <li>cate11</li>
        <li>cate12</li>
        ................
    </ul>
  </div>
</div>

Any idea what could be causing this. Thanks.

Answer 1

Saurabh is correct, <div class="listCol"><ul> is not a valid selector.

Try replacing that bit with:

$('<div class="listCol">').append('<ul>')

var $listCol = $('<div class="listCol">').appendTo('.popover-content');
$('<ul>').append(group).appendTo($listCol);

DEMO