Как я могу закрыть тег div и открыть новый после нескольких элементов содержимого, используя jquery?

Question

У меня есть контейнер div (содержащий дочерние элементы), который нужно разделить на несколько (в зависимости от длины содержимого)

<div class="box">
    <p>Element 1</p>
    <p>Element 2</p>
    <p>Element 3</p>
    <p class="here">Element 4</p>
    <p>Element 5</p>
    <p>Element 6</p>
</div>

Я уже пробовал insertBefore():

$('</div></div class="box">').insertBefore($('.here'));

Но это создает нечто подобное (чего я не понимаю):

<div class="box">
    <p>Element 1</p>
    <p>Element 2</p>
    <p>Element 3</p>
    <div class="box"></div>
    <p class="here">Element 4</p>
    <p>Element 5</p>
    <p>Element 6</p>
</div>

Мне нужно разделить мой контейнер 'box' на несколько. Есть ли другой способ управлять этим, чтобы получить это так?

<div class="box">
    <p>Element 1</p>
    <p>Element 2</p>
    <p>Element 3</p>
</div>
<div class="box">
    <p class="here">Element 4</p>
    <p>Element 5</p>
    <p>Element 6</p>
</div>

Фон: добавлена ​​высота содержимого каждого <p>. Когда определенная общая высота c достигнута, мне нужно закрыть текущую и открыть новый div 'box'.

Я также читал похожие темы, не находя (или, возможно, не понимая) решения моей проблемы.

Answer 1

Используйте appendTo для добавления нового .box к телу, затем используйте .append для перемещения всех элементов, которые .here или после .here, к этому новому .box:

$('<div class="box"></div>')
  .appendTo('body')
  .append($('.here, .here ~ *'));

.box {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
  <p>Element 1</p>
  <p>Element 2</p>
  <p>Element 3</p>
  <p class="here">Element 4</p>
  <p>Element 5</p>
  <p>Element 6</p>
</div>

Answer 2

Вы можете использовать свойство wrap! Например:

$(".here").wrap( "<div class="box"></div>");