包装两个元素之间的所有元素

Question

我有以下HTML

<div class="bar-something"><div class="fn-label"> SOMETHING</div> </div>
<div class="bar-appointment"><div class="fn-label"> Ap1</div></div>
<div class="bar-appointment"><div class="fn-label"> Ap2</div></div>
<div class="bar-appointment"><div class="fn-label"> Ap3</div></div>
<div class="bar-something-else"><div class="fn-label"> SOMETHING</div></div>
<div class="bar-appointment"><div class="fn-label"> Ap1</div></div>
<div class="bar-appointment"><div class="fn-label"> Ap2</div></div>
<div class="bar-appointment"><div class="fn-label"> Ap3</div></div>
<div class="bar-something-odd"><div class="fn-label"> SOMETHING</div></div>

我想bar-appointment用另一个元素包装所有元素,DIV所以DOM看起来像:

<div class="bar-something"><div class="fn-label"> SOMETHING</div> </div>
<div class="test">
  <div class="bar-appointment"><div class="fn-label"> Ap1</div></div>
  <div class="bar-appointment"><div class="fn-label"> Ap2</div></div>
<div>
<div class="bar-something-else"><div class="fn-label"> SOMETHING</div></div>
<div class="test">
    <div class="bar-appointment"><div class="fn-label"> Ap1</div></div>
    <div class="bar-appointment"><div class="fn-label"> Ap2</div></div>
    <div class="bar-appointment"><div class="fn-label"> Ap3</div></div>
    <div class="bar-appointment"><div class="fn-label"> Ap4</div></div>
    <div class="bar-appointment"><div class="fn-label"> Ap5</div></div>
</div>
<div class="bar-something-odd"><div class="fn-label"> SOMETHING</div></div>

我已经尝试了以下但是所有的内部标签也被包裹了,我不想要那样.

$('.bar-appointment').each(function() {
  $(this).nextUntil("div[class!='bar-appointment']").andSelf().wrapAll('<div class="test"></div>')});

我也试过使用just wrap,这只是单独包装每个元素,而不是我想要的组.

我这样做的最好方法是什么？

Answer 1

首先,您可以bar-appointment通过删除bar-appointment具有先前兄弟的元素来找到所有第一个元素(集合)bar-appointment.然后迭代它并找到所有兄弟bar-appointment元素并将它们全部包装起来

$('.bar-appointment').not('.bar-appointment + .bar-appointment').each(function() {
  $(this).nextUntil(":not(.bar-appointment)").addBack().wrapAll('<div class="test"> </div>')
})

.test {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="bar-something"><div class="fn-label"> SOMETHING</div> </div>
<div class="bar-appointment"><div class="fn-label"> Ap1</div></div>
<div class="bar-appointment"><div class="fn-label"> Ap2</div></div>
<div class="bar-appointment"><div class="fn-label"> Ap3</div></div>
<div class="bar-something-else"><div class="fn-label"> SOMETHING</div></div>
<div class="bar-appointment"><div class="fn-label"> Ap1</div></div>
<div class="bar-appointment"><div class="fn-label"> Ap2</div></div>
<div class="bar-appointment"><div class="fn-label"> Ap3</div></div>
<div class="bar-something-odd"><div class="fn-label"> SOMETHING</div></div>