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

中

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

如何在div中包装每个三个列表？

1 个答案: