Jquery 环绕相邻兄弟姐妹组

我需要根据某些类值在表中包装不同的相邻兄弟div分组。HTML标记可能会有所不同，但下面是一个示例

<div class="grid-4">4</div>
<div class="grid-4">4</div>
<div class="grid-4">4</div>
<div class="grid-4">4</div>
<div class="grid-8">8</div>
<div class="grid-8">8</div>
<div class="grid-4">4</div>
<div class="grid-4">4</div>
<div class="grid-8">8</div>
<div class="grid-4">4</div>
<div class="grid-4">4</div>
<div class="grid-4">4</div>

4
4.
4.
4.
8.
8.
4.
4.
8.
4.
4.
4.

以下是不同的分组：

一个网格8和一个网格4

一个网格4和一个网格8

三格-4

剩下的

我有#1和#2的代码，看起来很有效，但我的#3代码不包括包装中的第三个网格-4。我怀疑我可能误解了相邻的兄弟选择符

这把小提琴展示了我目前所拥有的：

---

我做错了什么？谢谢你的帮助

您对#1和#2有很好的工作解决方案：

表

元素将自动为您关闭

---

#3有点棘手。您无法创建集合并处理其中的每个成员，因为某些三人组将与其他三人组重叠

相反，您可以使用

while

循环，并继续处理第一组三个循环，直到没有更多循环为止<代码>prevUntil（“：not（div.grid-4）”获取所需的一切：

var f4;
while(f4=$('#container div.grid-4 + div.grid-4 + div.grid-4').first(), f4.length) {
  f4.prevUntil(':not(div.grid-4)')
    .addBack()
    .wrapAll('<table width="100%"><tr><td>')
    .attr('class', '');
}

var-f4；
而（f4=$（'#container div.grid-4+div.grid-4+div.grid-4'）.first（），f4.length）{
f4.前置（“：非（第4部分网格）”）
.addBack（）
.wrapAll（“”）
.attr（'类别'，''）；
}

---

#第4条更为直截了当：

$('#container > div').wrap('<table width="100%"><tr><td>');

$（'#container>div'）.wrap（''）；

---

---

单击顶部的按钮查看效果。

您是否可以显示您希望JavaScript创建的html，因为您的编号描述对我来说很难理解。请在此处显示您的JavaScript代码，而不仅仅是JSFIDLE链接。为什么不使用堆栈片段而不是JSFIDLE呢？你确定你的代码在小提琴中的顺序不是一个因素吗？

div.grid-4+div.grid-4+div.grid-4

选择3人组中的第一个div，而不是最后一个div。因此，您应该使用

.next（）

，而不是

.prev（）

@Barmar，它选择最后一个DIV。请参阅感谢您的解决方案，它们非常适合我的需要。我以前没有见过#3的构造，所以我学到了一些新东西。另外，感谢您指出addBack（）替换了andSelf（）。在阅读jQuery文档之后，我忘记了更改代码。

var f4;
while(f4=$('#container div.grid-4 + div.grid-4 + div.grid-4').first(), f4.length) {
  f4.prevUntil(':not(div.grid-4)')
    .addBack()
    .wrapAll('<table width="100%"><tr><td>')
    .attr('class', '');
}

$('#container > div').wrap('<table width="100%"><tr><td>');