0

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 : enter image description here

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.

Community
  • 1
  • 1
Nothing
  • 2,644
  • 11
  • 64
  • 115

1 Answers1

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

tewathia
  • 6,890
  • 3
  • 22
  • 27
  • @Saurabh You're right, I didn't notice that. Fixed now. See http://jsfiddle.net/tewathia/E5Vu9/2/ – tewathia Jan 28 '14 at 04:54
  • I have one problem with it, the default list is stay in every new list. It is not clear even I hover the other li. – Nothing Jan 28 '14 at 09:57
  • @Domo Could you rephrase that? – tewathia Jan 28 '14 at 10:07
  • I meant, when I hover on the 2nd 3rd 4th..... `ul`, `'
    • ..
    ` of the first `ul` still appended.
     – Nothing Jan 28 '14 at 10:10
  • @Domo Well, each group of `li` tags is inside a `ul` tag which is inside a `div.listCol` tag. Isn't that what you wanted? You can remove the empty `bigList` with `$bigList.remove();` – tewathia Jan 28 '14 at 10:18
  • All the contents in the first `ul` are appended to the other `ul` dear. – Nothing Jan 28 '14 at 10:23
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/46216/discussion-between-tewathia-and-domo) – tewathia Jan 28 '14 at 10:25