包装相邻兄弟姐妹的群体

Question

我需要根据某些 class 值将不同的相邻兄弟 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>

以下是不同的分组：

一个 grid-8 和一个 grid-4
一个 grid-4 和一个 grid-8
三格-4
剩下什么

我的 #1 和 #2 代码似乎可以工作，但我的 #3 代码不包含包装内的第三个 grid-4。我怀疑我可能误解了相邻的兄弟选择器。

这个 fiddle 显示了我目前所拥有的：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

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

包装相邻兄弟姐妹的群体

Wrapping groups of adjacent siblings

jquery

siblings

word-wrap