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

【问题标题】：How to Select a series of list-item elements, split them into two groups and wrap each group in a new surrounding DIV如何选择一系列列表项元素，将它们分成两组并将每组包装在一个新的周围 DIV 中
【发布时间】：2012-03-23 10:51:26
【问题描述】：

我正在尝试操作为网站导航栏提供动力的无序列表。我想将孩子 LI 分成两组，并在这些组周围添加一个新的 div。

用文字解释有点困难，所以我让我的标记来说话。然而，回顾一下，假设我们有 4 个“儿童级别”列表项，我们希望将这 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 后我希望标记的样子（只需添加带有“列”类的 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 函数？

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

【问题讨论】：

div 不是ul 或ol 的有效子元素。您需要将li 元素嵌套在父ul 元素中，然后将that 嵌套在li 中。顺便说一句：“不要介意这会导致 HTML 无效”……说真的？如果您要使用工具，请正确使用它。
需要一些代码...不是很多...但是使用无效的 html 会浪费精力...可能会在 IE 中崩溃...与多个<ul> 相邻的是什么？
更多我认为这个似乎越没有意义，因为列可以用 css float 完成而不改变结构

标签： jquery

【解决方案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 属性...

【讨论】：

【解决方案2】：

更简单的现代解决方案是使用 CSS3：

column-count: 2;
column-gap: 20px;

https://developer.mozilla.org/en-US/docs/Web/CSS/column-count

https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap

【讨论】：