jquery - 如何将每三个列表包装在一个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 位于 li 内部时就会出现问题，就像这样的标记: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>

那么，我怎样才能将嵌套在 li, ul 中的每三个 li 包裹起来......

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