zawijać wszystkie elementy pomiędzy dwoma elementami

Question

Mam następujący kod 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> 

Chcę owinąć wszystkie bar-appointment elementy z innego DIV więc DOM będzie wtedy wyglądać tak:

<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 Próbowałem następujących rzeczy, ale wszystkie wewnętrzne znaczniki też się zawijały i nie chcę tego.

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

Próbowałem też za pomocą tego właśnie wrap i zawija tylko każdy element osobno, nie jako grupa, jak chciałbym.

Jaki jest najlepszy sposób na robienie tego?

Answer 1

Najpierw można znaleźć cały pierwszy element bar-appointment (zestawu), usuwając elementy bar-appointment, które mają poprzednie siostry jako bar-appointment. Następnie iteracyjne nad tym i znaleźć wszystkie rodzeństwo, które są bar-appointment elementy i owinąć je wszystkie

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