wrap all elements between two elements

Question

I've got the following 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>

I want to wrap all the bar-appointment elements with another DIV so the DOM would then look like:

<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>

I've tried the following but all the inner tags get wrapped too and I don't want that.

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

I also tried using just wrap and this only wraps each element individually, not as a group as I would like.

What's the best way of me doing this?

Answer 1

First you can find all the first bar-appointment element(of the set) by removing bar-appointment elements which is having previous sibling as bar-appointment. Then iterate over that and find all the sibling which are bar-appointment elements and wrap all of them

$('.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>