文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用jquery关闭一个div标记，并在一系列content元素之后打开一个新的div标记？

问如何使用jquery关闭一个div标记，并在一系列content元素之后打开一个新的div标记？
EN

Stack Overflow用户

提问于 2020-01-28 16:19:31

回答 2查看 51关注 0票数 0

我有一个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>的内容高度。当达到一个特定的总高度时，我需要关闭当前并打开一个新的'box‘div。

我也读过类似的帖子，但没有为我的问题找到(或者可能是理解)任何解决方案。

jquery

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-01-28 16:24:43

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

票数 1

Stack Overflow用户

发布于 2020-01-28 16:31:07

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59944606

复制

相似问题

问如何使用jquery关闭一个div标记，并在一系列content元素之后打开一个新的div标记？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jquery关闭一个div标记，并在一系列content元素之后打开一个新的div标记？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jquery关闭一个div标记，并在一系列content元素之后打开一个新的div标记？
EN