CODEWITHSUNDEEP
jquerygrouping
Ron Richardson
Ron Richardson

Reputation: 111

Using jQuery to group varying number of divs wtih same class until "last" class

I've seen other related questions but not quite like mine.

I have blocks of code with varying number of rows and want to group those rows, including the "last" div:

<div class="row"></div>
<div class="row"></div>
<div class="last"></div>
<br>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="last"></div>
<br>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="last"></div>

I want:

<div class="wrapper">
<div class="row"></div>
<div class="row"></div>
<div class="last"></div>
</div>
<br>
<div class="wrapper">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="last"></div>
</div>
<br>
<div class="wrapper">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="last"></div>
</div>

I've tried various find, addBefore, wrapAll variations but just can't get it.

I've tried variations of:

$(this).find(".row, .last").wrapAll('<div class="wrapper"></div>');

Upvotes: 2

Views: 85

Answers (2)

Thangaraja
Thangaraja

Reputation: 956

We can acheive this by combining prevAll and wrapAll. Below is the ocde

$("div.last").each(function() {
  $(this).prevAll(".row").addBack().wrapAll("<div class='wrapper' />"); 
});

Demo : https://jsfiddle.net/wx8074qn/3/

Upvotes: 1

BenG
BenG

Reputation: 15154

Here is one way:-

//find all the 'first' .row by checking the previous is not a .row
$('.row').prev(':not(.row)').next().each(function() {
  //wrap all next elements until you find something not a div
  $(this).nextUntil(':not(div)').addBack().wrapAll($("<div></div>", {
    class: 'wrapper'
  }));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row"></div>
<div class="row"></div>
<div class="last"></div>
<br>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="last"></div>
<br>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="last"></div>

Upvotes: 3

Related Questions