Оберните группу div до следующего урока

Question

У меня есть следующее;

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

Я пытаюсь объединить их в группы, как следующее разделение в соответствии с первым 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>

Я пробовал следующее:

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

Answer 1

Jquery

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

вам нужно добавить addSelf так, чтобы он включал оба конца, просто wrapALl будет включать только элементы в Betweeen

Рабочая ссылка Jsfiddle