在每个类中附加一个元素答案

【问题标题】：Append an element in every class在每个类中附加一个元素
【发布时间】：2020-10-13 12:21:32
【问题描述】：

在 JQuery 中，我如何在每个具有相同类的 div 的每个第二个子元素的 div 元素中附加一个 img？我有这段代码，我想在 h5 和 p 标签之间插入一个 div 标签。 h5 标签是通用的，它们没有任何类或 ID 可以引用，只有它们的父级具有选项卡窗格类。

<div class="tab-pane">
   <h5></h5>
   /*Here must be the new div in every tab-pane: <div><img></div>*/
   <p></p>
   <div></div>
   <ul></ul>
</div>
<div class="tab-pane">
   /*same content as before*/
</div>
<div class="tab-pane">
   /*same content as before*/
</div>
<div class="tab-pane">
   /*same content as before*/
</div>

所以我尝试了这个：

var paneWrap = document.createElement("div");
$(".tab-pane:nth-child(2)").append(paneWrap);

但是结果是：

<div class="tab-pane">
   <h5></h5>
   <p></p>
   <div></div>
   <ul></ul>
</div>
<div class="tab-pane">
   <h5></h5>
   <p></p>
   <div></div>
   <ul></ul>
   <div></div> /*THE NEW DIV IS HERE!*/
</div>
<div class="tab-pane">
   <h5></h5>
   <p></p>
   <div></div>
   <ul></ul>
</div>
<div class="tab-pane">
   <h5></h5>
   <p></p>
   <div></div>
   <ul></ul>
</div>

然后我尝试了这个：

var paneWrap = document.createElement("div");
$(".tab-pane > h5:nth-child(1)").append(paneWrap);

但是在这种情况下，h5 内部是新的 div。有任何想法吗？ tks！

【问题讨论】：

标签： jquery css-selectors append parent-child

【解决方案1】：

这是正在发生的事情：

var paneWrap = document.createElement("div");
$(".tab-pane:nth-child(2)").append(paneWrap);

当您使用选择器.tab-pane:nth-child(2) 时，它会选择所有第二个子元素.tab-pane。找到这些元素后，您使用 paneWrap 创建的 div 将被附加。

但是当你使用.tab-pane > h5:nth-child(1) 作为选择器时，它会选择h5 元素并在其中附加div。

现在，要在元素之后/之前插入一个元素，方法如下：

var paneWrap = document.createElement("div");  //creating div element

用于在 h5 之后插入：

$(".tab-pane > h5:nth-child(1)").after(paneWrap);

或

$(paneWrap).insertAfter(".tab-pane > h5:nth-child(1)");

用于在 p 标签之前插入：

$(".tab-pane > p:nth-child(2)").before(paneWrap);

或

$(paneWrap).insertBefore(".tab-pane > p:nth-child(2)");

【讨论】：

很高兴为您提供帮助。不要忘记投票并将答案标记为正确。快乐编码:)

【解决方案2】：

既然你选择了你想让 div 跟随的元素，你应该使用.after()

var paneWrap = document.createElement("div");
$(".tab-pane > h5:nth-child(1)").after(paneWrap);

h5 + div{
    width:1em,height:1em;border:1px red solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab-pane">
   <h5></h5>
   
   <p></p>
   <div></div>
   <ul></ul>
</div><div class="tab-pane">
   <h5></h5>
   
   <p></p>
   <div></div>
   <ul></ul>
</div><div class="tab-pane">
   <h5></h5>
   
   <p></p>
   <div></div>
   <ul></ul>
</div><div class="tab-pane">
   <h5></h5>
   
   <p></p>
   <div></div>
   <ul></ul>
</div>

【讨论】：