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

Question

我正在寻找一种在 <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>"); 但没用。知道该怎么做吗？

Answer 1

我不明白你到底想做什么。据我了解；您希望第一个 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().

Answer 2

您可以使用 :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>

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

How to add </div> at the end of the first <p>?

jquery

wordpress-theming

advanced-custom-fields

wordpress-gutenberg