在每个 class 中附加一个元素

Question

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

<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。有任何想法吗？谢谢！

Answer 1

既然你 select 你想要 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>

Answer 2

这是正在发生的事情：

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)");

在每个 class 中附加一个元素

Append an element in every class

jquery

append

parent-child

css-selectors