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?
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>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments