我有这种标记
<div class="container">
<div class="to-be-wrapped"></div>
<div class="to-be-wrapped"></div>
<div class="to-be-wrapped"></div>
<div class="divider"></div>
<div class="to-be-wrapped"></div>
<div class="to-be-wrapped"></div>
<div class="divider"></div>
<div class="to-be-wrapped"></div>
<div class="to-be-wrapped"></div>
<div class="to-be-wrapped"></div>
<div class="divider"></div>
<div class="to-be-wrapped"></div>
<div class="to-be-wrapped"></div>
</div>
并且我希望彼此相邻的类to-be-wrapped
的所有元素都包含在另一个div中,因此输出将是:
<div class="container">
<div class="wrapper">
<div class="to-be-wrapped"></div>
<div class="to-be-wrapped"></div>
<div class="to-be-wrapped"></div>
</div>
<div class="divider"></div>
<div class="wrapper">
<div class="to-be-wrapped"></div>
<div class="to-be-wrapped"></div>
</div>
<div class="divider"></div>
<div class="wrapper">
<div class="to-be-wrapped"></div>
<div class="to-be-wrapped"></div>
<div class="to-be-wrapped"></div>
</div>
<div class="divider"></div>
<div class="wrapper">
<div class="to-be-wrapped"></div>
<div class="to-be-wrapped"></div>
</div>
</div>
当我在.wrapAll
上使用jQuery的.to-be-wrapped
方法时,它们被包装在一个只有一个新的包装器中。
是否有一些jQuery方法或其他方法来做到这一点?
这是这样做的一种方式:
var $c = $('.container');
while ($c.children('.to-be-wrapped').length)
$c.children('.to-be-wrapped:first')
.nextUntil('.divider')
.addBack()
.wrapAll('<div class="wrapper"/>');
尝试此解决方案:
$(".divider:first").prevAll(".to-be-wrapped").wrapAll("<div class='wrapper'/>");
$(".divider").each(function(){
$(this).nextAll(".to-be-wrapped").wrapAll("<div class='wrapper'/>");
});