如何在一個div中包含每個三個列表？

Question

我申請以下的jQuery用<div class="col">把它包起來每次三li

var cells = $('.menu li'); 

    for(var i = 0; i < cells.length; i+=3) { 
     cells.slice(i, i+3).wrapAll("<div class='col' />"); 
    } 

由於這是這樣的標記demo

<ul class="menu"> 
    <li>one</li> 
    <li>two</li> 
    <li>three</li> 
    <li>one</li> 
    <li>two</li> 
    <li>three</li> 
    <li>one</li> 
    <li>two</li> 
    <li>three</li> 
</ul> 

對於這個標記也它完美的作品那麼簡單。 demo2

<ul class="menu"> 
    <li>one</li> 
    <ul> 
     <li>two</li> 
     <li>three</li> 
     <li>four</li> 
     <li>five</li> 
    </ul> 
    <li>three</li> 
    <li>one</li> 
    <li>two</li> 
    <ul> 
     <li>two</li> 
     <li>three</li> 
     <li>four</li> 
     <li>five</li> 
    </ul> 
    <li>three</li> 
    <li>one</li> 
    <li>two</li> 
    <li>three</li> 
</ul> 

但是當UL是李那麼問題發生，像這樣的標記內：demo3

<ul class="menu"> 
     <li>one</li> 
     <ul> 
      <li>two</li> 
      <li>three</li> 

      <li>four    ------------ 
       <ul>      | 
       <li>two</li>    | 
       <li>three</li>    | it's counting as 1 but I want 
       <li>four</li>    | counted to be 5 
       <li>five</li>    | 
       </ul>   ------------- 
      </li> 
      <li>five</li> 
     </ul> 
     <li>six</li> 
    </ul> 

所以，我怎麼能包裹每三華里任何它嵌套裏，UL內....

Answer 1

嘗試

var $menu = $('.menu'); 
var cells = $menu.find('li').detach(); 
$menu.empty(); 

for (var i = 0; i < cells.length; i += 3) { 
    cells.slice(i, i + 3).wrapAll("<ul />").parent().wrap('<li class="col"/>').parent().appendTo($menu); 
} 

演示：Fiddle