jQuery使用div在较小的列表中拆分长ul列表

Question

我发现this solution与ul到li的效果很好。

这是我的代码：

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

这是结果：

我的期望：

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

知道可能导致这种情况的原因。感谢。

Answer 1

Saurabh是正确的，<div class="listCol"><ul>不是有效的选择器。

尝试用以下内容替换该位：

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

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

DEMO