我有一个允许用户在页面上插入内容块的cms.用户可以使用不同类型的内容块,它们可以按任何顺序插入.高级dom结构的示例可能如下所示：
<p>Some rich text</p> <div class="Box">...</div> <div class="Box">...</div> <div class="Box">...</div> <h3>Some more rich text</h3> <p>Lorem ipsum</p> <div class="Box">...</div> <div class="Box">...</div>
我想要做的是在包装’容器’div中包装任何相邻的’Box’div.因此,在上面的示例中,将插入两个“容器”div,因为有两组Box div,导致：
<p>Some rich text</p>
<div class="container">
<div class="Box">...</div>
<div class="Box">...</div>
<div class="Box">...</div>
</div>
<h3>Some more rich text</h3>
<p>Lorem ipsum</p>
<div class="container">
<div class="Box">...</div>
<div class="Box">...</div>
</div>
我不认为有一个聪明的方法来使用css选择器,所以有人知道无论如何用jQuery做到这一点？
解决方法
好吧你可以这样做
JSFiddle example我刚刚鞭打了.
这基本上循环遍历每个.Box,将其添加到数组并确定下一个元素是否也具有.Box类：
var collection = [];
$('.Box').each(function() {
var nextBox = $(this).next().hasClass('Box');
...
collection.push($(this));
})
如果下一个元素没有.Box类,它会创建包含分隔符,在集合数组中第一个.Box之前将其放在页面上,然后使用appendTo将所有.Box分隔符移动到其中：
if(!nextBox) { var container = $('<div class="collection"></div>'); container.insertBefore(collection[0]); for(i=0;i<collection.length;i++) { collection[i].appendTo(container); } collection = []; }
