Question

我需要根据某些类值在表格中包含不同的adjbtent兄弟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>

以下是不同的分组：

一个网格-8和一个网格-4
一个网格-4和一个网格-8
three grid-4
剩下的任何内容

我有＃1和＃2的代码似乎有效，但我的＃3代码不包含第三个grid-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

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

包裹相邻兄弟姐妹的群体

1 个答案: