Wrap group of divs until next class

Question

I have the following;

<div class="content">
  <div class="row morepad">
    <a href="#">Association 1</a>
  </div>
  <div class="row">
   <a href="#">Association 2</a>
  </div>
  <div class="row morepad">
    <a href="#">Association 3</a>
  </div>
  <div class="row">
    <a href="#">Association 4</a>
  </div>
</div>

I am trying to wrap them into groups as the following separating according to the first morepad.

<div class="content">
 <div>
  <div class="row morepad">
    <a href="#">Association 1</a>
  </div>
  <div class="row">
   <a href="#">Association 2</a>
  </div>
 </div>
 <div>
  <div class="row morepad">
    <a href="#">Association 3</a>
  </div>
  <div class="row">
    <a href="#">Association 4</a>
  </div>
 </div>
</div>

I have tried the following:

$('.morepad').each(function() {
      $(this).nextUntil('.morepad').wrapAll('<div></div>');
  });

You need to include source morepad as well, Try `$(this).nextUntil('.morepad').addBack().wrapAll('
');` `.addBack()` or `.add(this)` should help. — PSL, Jul 30 '14 at 19:46

score 2 · Accepted Answer · answered Jul 30 '14 at 19:52

2

Jquery

$('.morepad').each(function() {
      $(this).nextUntil('.morepad').andSelf().wrapAll('<div></div>');
  });

you need to add addSelf so that it includes both the ends just wrapALl will only include the elements in betweeen

Working Jsfiddle link

answered Jul 30 '14 at 19:52

Richie Fredicson

2,150
3
16
19

yeah just saw that addSelf is replaced by addBack in newer versions of jquery – Richie Fredicson Jul 30 '14 at 20:14
Excellent. Worked like a charm. Thanks! – kayzoe Jul 30 '14 at 20:42

Wrap group of divs until next class

1 Answers1