jquery - 对每 N 个元素进行分组

Question

我有一个 ul，其中可以有几个 li 元素，我希望每个 n 数字都放在一个 div 中，例如，如果这是 html：

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>

我希望结果是这样的：

<div id=firstgroup">
    <li>1</li>
    <li>2</li>
</div>
<div id=secondgroup">
    <li>3</li>
    <li>4</li>
</div>
<div id="thirdgroup">
    <li>5</li>
    <li>6</li>
</div>
<div id=fourthgroup">
    <li>7</li>
    <li>8</li>
</div> 

依此类推，所以在这里，我们将每 2 个元素分组到一个新的 div 中。

Answer 1

您的输出 html 无效，请尝试以下操作

var ids = ['first', 'second', 'third', 'fourth', 'fifth']

var li = $("ul li").unwrap();
for(var i = 0; i < li.length; i+=2) {
  li.slice(i, i+2).wrapAll("<ul id='" + ids[i/2] + "'></ul>");
}

演示：小提琴

输出

<ul id="first">
    <li>1</li>
    <li>2</li>
</ul>
<ul id="second">
    <li>3</li>
    <li>4</li>
</ul>
<ul id="third">
    <li>5</li>
    <li>6</li>
</ul>
<ul id="fourth">
    <li>7</li>
    <li>8</li>
</ul>

Answer 2

您可以按如下方式执行此操作。

var li = $("ul li");
for(var i = 0; i < li.length; i+=2) {
  li.slice(i, i+2).wrapAll("<div class='group'></div>");
}

Live Demo