Question

我有这种标记

<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方法或其他方法可以做到这一点？

fiddle

Answer 1

这是做到这一点的方法之一：

var $c = $('.container');

while ($c.children('.to-be-wrapped').length)
    $c.children('.to-be-wrapped:first')
      .nextUntil('.divider')
      .addBack()
      .wrapAll('<div class="wrapper"/>');

http://jsfiddle.net/A4RAy/1/

Answer 2

试试这个解决方案：

$(".divider:first").prevAll(".to-be-wrapped").wrapAll("<div class='wrapper'/>");
$(".divider").each(function(){
  $(this).nextAll(".to-be-wrapped").wrapAll("<div class='wrapper'/>");

}）;

同一父母的所有群体

2 个答案: