如何使用jquery关闭一个div标记并在多个内容元素之后打开一个新标记？

我有一个div容器（包含子元素），它需要拆分成几个容器（取决于内容长度）

但这是这样的（我不明白）：

要素1

要素2

要素3

元素4

要素5

要素6

我需要把我的“盒子”容器分成几个。有没有其他办法来处理这件事，让它变成那样

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

要素1

要素2

要素3

元素4

要素5

要素6

背景：添加每个

的内容高度。当达到特定的总高度时，我需要关闭当前并打开一个新的“box”div

---

我也读过类似的文章，但没有找到（或可能理解）解决我问题的任何方法。

使用

appendTo

将新的

.box

附加到正文中，然后使用

.append

移动

中的所有元素。此处

或之后的

。此处

添加到新的

.box

：

$（“”）
.appendTo（'正文'）
.append（$（'.here，.here~*'）
.box{
边框：1px纯黑；
}

要素1

要素2

要素3

元素4

要素5

要素6

您可以使用wrap属性！例如：

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

$（.here”）.wrap（“”）；

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

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

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