时间戳

首页 > 解决方案 > 如何在使用 jquery 的多个内容元素之后关闭一个 div 标签并打开一个新标签？

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

问题描述

我有一个 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>

我需要将我的“盒子”容器分成几个。有没有其他方法来管理这个，得到它吗？

<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>。当达到特定的总高度时，我需要关闭当前并打开一个新的“盒子”div。

我也阅读了类似的主题，但没有找到（或可能理解）我的问题的任何解决方案。

标签： jquery

解决方案

用于appendTo将 new 附加.box到正文，然后用于.append将所有元素移动到该 new.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>

推荐阅读