我有一个允许用户在页面上插入内容 block 的 cms。用户可以使用不同类型的内容 block ,它们可以按任何顺序插入。一个高级 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 包装在一个包装“容器”div 中。因此,在上面的示例中,将插入两个“容器”div,因为有两组框 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 来做到这一点?
最佳答案
你可以使用
-
.nextUntil
, 得到所有的下一个.box
. -
.andSelf
将当前元素添加到集合中 -
.wrapAll
将每个集合包装到不同的.container
$('.box').not('.box+.box').each(function(){
$(this).nextUntil(':not(.box)').addBack().wrapAll('<div class="container" />');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
关于jquery 包装相邻元素组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15430851/