如何在第一个 <p> 的末尾添加 </div>？答案

【问题标题】：How to add </div> at the end of the first <p>?如何在第一个 <p> 的末尾添加 </div>？
【发布时间】：2021-07-18 19:05:24
【问题描述】：

我正在寻找一种在<div> 之后的第一段末尾添加</div> 的方法。我的问题是我在 ACF 中创建了一个图像块，并且我有一个 <div> 来打开该块。块中的输出如下所示：

<div id="side-image alignright">
   <div class="side-image alignright">
   [img]
   </div>

我网站上的输出是这样的：

<div id="side-image alignright">
   <div class="side-image alignright">
   [img]
   </div>
   <p>text text text text</p>
   <p>text text text text</p>
   <p>text text text text</p>
   <p>text text text text</p>
   <p>text text text text</p>

我要做的是在<div class="side-image alignright"> 之后的第一个<p> 的末尾添加一个结束 div ()，使其看起来像这样：

<div id="side-image alignright">
   <div class="side-image alignright">
   [img]
   </div>
   <p>text text text text</p>
</div>
<p>text text text text</p>
<p>text text text text</p>
<p>text text text text</p>
<p>text text text text</p>

我试过$( "#side-image p" ).first().append("</div>");，但没有成功。有什么想法吗？

【问题讨论】：

标签： jquery wordpress-theming advanced-custom-fields wordpress-gutenberg

【解决方案1】：

您可以使用:not、:first 和insertAfter() 来实现此目的。

演示代码：

$("#side-image p:not(:first)").insertAfter('#side-image')

#side-image {
  color: red;
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="side-image">
  <div class="side-image alignright">
    [img]
  </div>
  <p>text text text text1</p>
  <p>text text text text2</p>
  <p>text text text text3</p>
  <p>text text text text4</p>
  <p>text text text text5</p>
</div>

【讨论】：

【解决方案2】：

我不明白你想做什么。据我了解；您希望第一个 p 元素保留在 div 中。您可以按如下方式执行此操作。如果您有任何进一步的问题，我将很荣幸为您提供帮助。最好的问候。

var pItem = $('<p />').html('Text').appendTo($('.side-image'));

console.log($('#side-image-alignright').html())

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div id="side-image-alignright">
    <div class="side-image alignright">
      [img]
    </div>
  </div>
  <p>text text text text</p>
  <p>text text text text</p>
  <p>text text text text</p>
  <p>text text text text</p>
</body>

为了解释，我们使用 jQuery 创建了一个 p 元素。然后我们追加到 div。为此，我们使用函数：appendTo()。

【讨论】：