如何在父div下包装连续的兄弟div？

Question

我有一些看起来像这样的HTML:

<p>Some Text</p>
<div class="listBullet">Item 1</div>
<div class="listBullet">Item 2</div>
<div class="listBullet">Item 3</div>
<p>Some More Text</p>
<div class="listBullet">Item 1</div>
<div class="listBullet">Item 2</div>
<div class="listBullet">Item 3</div>
<p>Some Other Text</p>

我想最终得到以下输出:

<p>Some Text</p>
<div class="wrapperDiv">
   <div class="listBullet">Item 1</div>
   <div class="listBullet">Item 2</div>
   <div class="listBullet">Item 3</div>
</div>
<p>Some More Text</p>
<div class="wrapperDiv">
   <div class="listBullet">Item 1</div>
   <div class="listBullet">Item 2</div>
   <div class="listBullet">Item 3</div>
</div>
<p>Some Other Text</p>

我尝试过$(".listBullet").wrapAll("<div class='wrapperDiv' />"),但最终将两个块移动到彼此连续.看起来我需要的是一个选择器,它将连续的块分隔成单独的元素,然后我将单独调用wrapAll.

Answer 1

这样做的工作:

$('p + .listBullet').each(function() {
  $(this).nextUntil('p')
         .addBack()
         .wrapAll("<div class='wrapperDiv' />");
});

小提琴1

如果你的XHTML有多种元素,你可以这样做(假设container是父类的div):

$('.container > :not(.listBullet) + .listBullet').each(function() {
  $(this).nextUntil('.container > :not(.listBullet)')
         .addBack()
         .wrapAll("<div class='wrapperDiv' />");
});

小提琴2

这是一种更强力的方法:

var lb= [];
$('.container > *').each(function() {
  if($(this).hasClass('listBullet')) {
    lb.push(this);
  }
  else {
    $(lb).wrapAll("<div class='wrapperDiv'/>");
    lb= [];
  }
});
$(lb).wrapAll("<div class='wrapperDiv'/>");

小提琴3