同一父母的所有群体

问题描述 投票:2回答:2

我有这种标记

<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

javascript jquery
2个回答
6
投票

这是这样做的一种方式:

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/


0
投票

尝试此解决方案:

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

});

© www.soinside.com 2019 - 2024. All rights reserved.