Wrap Groups Of Elements Using JQuery

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 be

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

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

Solution 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