Wrap around groups of elements using jQuery

Question

I've got a list of elements and I want to group them with div starting with the class HEADER and end it if the class is BREAK or the last element.

So the code below,

<div class="test">Test 0</div>
<div class="header">Header 1</div>
<div class="test">Test 1</div>
<div class="header">Header 2</div>
<div class="test">Test 2</div>
<div class="test">Test 3</div>
<div class="break">Break 1</div>
<div class="header">Header 3</div>
<div class="test">Test 4</div>
<div class="test">Test 5</div>
<div class="header">Header 4</div>
<div class="test">Test 6</div>
<div class="break">Break 2</div>
<div class="test">Test 7</div>
<div class="header">Header 5</div>
<div class="test">Test 8</div>

Would become,

<div>
    <div class="test">Test 0</div>
    <div class="group">
        <div class="header">Header 1</div>
        <div class="test">Test 1</div>
        <div class="header">Header 2</div>
        <div class="test">Test 2</div>
        <div class="test">Test 3</div>
    </div>
    <div class="break">Break 1</div>
    <div class="group">
        <div class="header">Header 3</div>
        <div class="test">Test 4</div>
        <div class="test">Test 5</div>
        <div class="header">Header 4</div>
        <div class="test">Test 6</div>
    </div>
    <div class="break">Break 2</div>
    <div class="test">Test 7</div>
    <div class="group">
        <div class="header">Header 5</div>
        <div class="test">Test 8</div>
    </div>
<div>

Any ideas? Thanks in advance.

Answer 1

You can use wrapAll() method as shown below:

 $(".header").each(function() { var $group = $(this).nextUntil(".break").addBack(); if (!$(this).closest(".group").length) $group.wrapAll('<div class="group"/>'); }); 

 .group { background: dodgerblue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="test">Test 0</div> <div class="header">Header 1</div> <div class="test">Test 1</div> <div class="header">Header 2</div> <div class="test">Test 2</div> <div class="test">Test 3</div> <div class="break">Break 1</div> <div class="header">Header 3</div> <div class="test">Test 4</div> <div class="test">Test 5</div> <div class="header">Header 4</div> <div class="test">Test 6</div> <div class="break">Break 2</div> <div class="test">Test 7</div> <div class="header">Header 5</div> <div class="test">Test 8</div> 

---

Reference:

• each()
• addBack()
• nextUntil()
• closest()