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>");
}

演示：Fiddle

输出

<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>");
}

每N个元素分组

2 个答案:

`Live Demo`