jquery - 如何选择一系列列表项元素，将它们分成两组并将每个组包装在新的周围 DIV 中

Question

我正在尝试操作一个为网站导航栏提供支持的无序列表。我想将子 LI 分成两组，并用一个新的 div 围绕这些组。

用语言解释有点困难，所以我会让我的标记来说话。然而，回顾一下，让我们假设我们有 4 个“ child 级别”列表项，我们希望将这 4 个 LI 分成 2 组(因此每组 2 个 LI，如果有 10 个，则每组需要 5 个，如果有 5 个) ，那么我们希望第一组中有 3 个，第二组中有 2 个)并将这些新组中的每一个包装在新创建的 DIV 中。

这是现有的标记 - 在此示例中，只有第一个父链接有子链接/孙链接:

<div id="nav">
    <ul>
        <li><a href="#">Parent Link 1</a>
            <div class="drop">
                <ul>
                    <li><a href="#">Child 1</a>
                        <ul>
                            <li><a href="#">Grand Child 1</a></li>
                            <li><a href="#">Grand Child 2</a></li>
                            <li><a href="#">Grand Child 3</a></li>
                            <li><a href="#">Grand Child 4</a></li>
                            <li><a href="#">Grand Child 5</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Child 2</a>
                        <ul>
                            <li><a href="#">Grand Child 1</a></li>
                            <li><a href="#">Grand Child 2</a></li>
                            <li><a href="#">Grand Child 3</a></li>
                            <li><a href="#">Grand Child 4</a></li>
                            <li><a href="#">Grand Child 5</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Child 3</a>
                        <ul>
                            <li><a href="#">Grand Child 1</a></li>
                            <li><a href="#">Grand Child 2</a></li>
                            <li><a href="#">Grand Child 3</a></li>
                            <li><a href="#">Grand Child 4</a></li>
                            <li><a href="#">Grand Child 5</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Child 4</a>
                        <ul>
                            <li><a href="#">Grand Child 1</a></li>
                            <li><a href="#">Grand Child 2</a></li>
                            <li><a href="#">Grand Child 3</a></li>
                            <li><a href="#">Grand Child 4</a></li>
                            <li><a href="#">Grand Child 5</a></li>
                        </ul>
                    </li>
                </ul>
            </div>    
        </li>
        <li><a href="#">Parent Link 2</a></li>
        <li><a href="#">Parent Link 3</a></li>
        <li><a href="#">Parent Link 4</a></li>
    </ul>
</div>

这就是我希望 jQuery 操作 DOM 后标记的样子(只需添加带有“column”类的 div):

<div id="nav">
<ul>
    <li><a href="#">Parent Link 1</a>
        <div class="drop">
            <ul>
                <div class="column">
                    <li><a href="#">Child 1</a>
                        <ul>
                            <li><a href="#">Grand Child 1</a></li>
                            <li><a href="#">Grand Child 2</a></li>
                            <li><a href="#">Grand Child 3</a></li>
                            <li><a href="#">Grand Child 4</a></li>
                            <li><a href="#">Grand Child 5</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Child 2</a>
                        <ul>
                            <li><a href="#">Grand Child 1</a></li>
                            <li><a href="#">Grand Child 2</a></li>
                            <li><a href="#">Grand Child 3</a></li>
                            <li><a href="#">Grand Child 4</a></li>
                            <li><a href="#">Grand Child 5</a></li>
                        </ul>
                    </li>
                </div>
                <div class="column last">
                    <li><a href="#">Child 3</a>
                        <ul>
                            <li><a href="#">Grand Child 1</a></li>
                            <li><a href="#">Grand Child 2</a></li>
                            <li><a href="#">Grand Child 3</a></li>
                            <li><a href="#">Grand Child 4</a></li>
                            <li><a href="#">Grand Child 5</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Child 4</a>
                        <ul>
                            <li><a href="#">Grand Child 1</a></li>
                            <li><a href="#">Grand Child 2</a></li>
                            <li><a href="#">Grand Child 3</a></li>
                            <li><a href="#">Grand Child 4</a></li>
                            <li><a href="#">Grand Child 5</a></li>
                        </ul>
                    </li>
                </div>
            </ul>
        </div>    
    </li>
    <li><a href="#">Parent Link 2</a></li>
    <li><a href="#">Parent Link 3</a></li>
    <li><a href="#">Parent Link 4</a></li>
</ul>
</div>

别介意这会导致 HTML 无效...这可能吗？嗯，当然这是可能的，但我想问题是，这在合理数量的 jQuery 中可能吗？是否已经有 jQuery 函数可以完成大部分繁重的工作？

如果有人有任何想法或提示，我们将不胜感激，谢谢!

Answer 1

好的，按照要求忽略无效的 html 问题，如下所示应该可以工作:

var $lis = $("#nav .drop > ul > li"),
    i = Math.ceil($lis.length / 2);

$lis.slice(0, i).wrapAll($("<div />").addClass("column"));
$lis.slice(i).wrapAll($("<div />").addClass("column last"));

回到无效 html 的问题，我认为你可以通过这样做使其有效:

$lis.slice(0, i).wrapAll($("<li><ul></ul></li>").addClass("column"));
$lis.slice(i).wrapAll($("<li><ul></ul></li>").addClass("column last"));

当然，如果您希望并排显示 li 元素，您可以更改它们的 CSS display 属性...