相邻兄弟姐妹的包装组

Question

我需要根据特定的类值在表中包装不同的邻接兄弟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>

以下是不同的分组：

1. 一个网格-8和一个网格-4
2. 一个网格-4和一个网格-8
3. 三格-4
4. 不管剩下什么

我有#1和#2的代码，但我的代码#3并不包括包装中的第三个网格-4。我想我可能误解了邻接的兄弟姐妹选择器。

这个小提琴显示了我到目前为止所拥有的：http://jsfiddle.net/92cmytw9/1/

我做错了什么？谢谢你的帮忙!

Answer 1

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

$('#container').find('div.grid-4 + div.grid-8').each(function () {
  $(this)
    .prev()
    .andSelf()
    .wrapAll('<table width="100%"><tr><td></td></tr></table>')
    .attr('class', '');
});

不推荐使用andSelf()，所以使用addBack()代替。

你可以把它简化一点：

$('#container div.grid-4 + div.grid-8').each(function () {
  $(this)
    .prev()
    .addBack()
    .wrapAll('<table width="100%"><tr><td>')
    .attr('class', '');
});

table元素将自动为您关闭。

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

相反，您可以使用一个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', '');
}

​

#4更直接：

​

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

Updated Fiddle

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