将两个元素之间的所有元素包裹起来

Question

我有以下HTML代码：

我有以下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>

我希望用另一个 DIV 包裹所有的 bar-appointment 元素，这样 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>')});

我也尝试只使用wrap，但这只会将每个元素单独包装，而不是像我想要的那样作为一组包装。

那么最好的方法是什么呢？

- Pindo

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>

- Arun P Johny