Wrap groups of elements using jQuery

Question

I've got a list of elements and I want to group them with div starting with the first element and ends with BREAK class then start a new group after the class BREAK.

So the code below,

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

Would become,

<div>
    <div class="group">
        <div class="test">Test 0</div>
        <div class="test">Test 1</div>
        <div class="break">Break 0</div>
    </div>
    <div class="group">
        <div class="test">Test 2</div>
        <div class="test">Test 3</div>
        <div class="break">Break 1</div>
    </div>
        <div class="group">
        <div class="test">Test 4</div>
        <div class="test">Test 5</div>
        <div class="test">Test 6</div>
        <div class="break">Add last break element</div>
    </div>
<div>

And append a div element in the last group.

Any ideas? Thanks in advance.

Answer 1

I'd probably go with simple: Loop through them with a container you add to, add a new container every time you see break :

var div;
$("selector for the divs").each(function() {
    if (!div) {
        div = $("<div>").insertBefore(this);
    }
    div.append(this);
    if ($(this).hasClass("break")) {
        div = undefined;
    }
});
if (div) {
    $("<div>last break</div>").addClass("break").appendTo(div);
}

Example (I added a wrapper class so we could see the effect when adding):

 $("#go").click(function() { var div; $("#container > div").each(function() { if (!div) { div = $("<div>").addClass("wrapper").insertBefore(this); } div.append(this); if ($(this).hasClass("break")) { div = undefined; } }); if (div) { $("<div>last break</div>").addClass("break").appendTo(div); } }); 

 .test { color: blue; } .break { color: red; } .wrapper { border: 1px solid #aaa; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="button" id="go" value="Go"> <div id="container"> <div class="test">Test 0</div> <div class="test">Test 1</div> <div class="break">Break 0</div> <div class="test">Test 2</div> <div class="test">Test 3</div> <div class="break">Break 1</div> <div class="test">Test 4</div> <div class="test">Test 5</div> <div class="test">Test 6</div> </div> 

Answer 2

I think you can also do something like this: first you insert one more .break to all .test parent container, then using wrapAll method wrap groups properly:

 $('.test').parent().append('<div class="break">Break 2</div>'). find('.test + .break').each(function() { $(this).prevUntil('.break, .group').add(this).wrapAll('<div class="group"></div>'); }); 

 .group { padding: 3px; background: #BFECBE; margin-bottom: 2px; } 

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

Answer 3

this code is working fine,you can check the fiddle and demo here as well

 $("div.test").each(function() { if (!$(this).nextAll(".break").length) $(".test").last().after('<div class="break">Add last break element</div>'); if (!$(this).parents(".group").length) $(this).add($(this).nextUntil('.break+.test').andSelf()).wrapAll('<div class="group" />'); }); 

 .group { background: red; margin: 10px; } 

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

});

Fiddle Demo