jQuery将所有组包装在同一个父组中

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>

当我使用jQuery的.wrapAll方法时,它们被包装在一个只有一个新的包装器中..to-be-wrapped

是否有一些jQuery方法或其他方法来做到这一点？

小提琴

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/