在每个班级中附加一个元素

如何解决在每个班级中附加一个元素

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

<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！

解决方法

由于您选择了要用于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>

,

这是正在发生的事情：

  const dateTimeOnChange = (
    date: Array<Moment>,dateString: Array<string>
  ): void => {
    console.log(date);
    console.log(dateString);
  };

使用选择器var paneWrap = document.createElement("div"); $(".tab-pane:nth-child(2)").append(paneWrap); 时，它将选择所有.tab-pane:nth-child(2)元素，它们是第二个子元素。找到这些元素之后，您使用.tab-pane创建的div会被追加。

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

现在，要在元素之后/之前插入元素，以下是方法：

div

用于在h5之后插入：

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

或

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

---

用于在p标签之前插入：

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

或

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