Question

我具有以下html结构

<div class"parent1">
  <div class="child1">text</div>
  <div class="child2">text</div>
  <div class="child3">text</div>
  <div class="child4">text</div>
</div>

<div class="parent2">
  <div class="child2">some text</div>
</div>

我正在parent1 div上循环并获取子div的索引。并且如果parent2中不存在具有该类的div，我想添加一个空的div与该类，并且位置与parent1中的位置完全相同。结果就是这样

<div class="parent2">
  <div class="child1"></div>
  <div class="child2">some text</div>
  <div class="child3"></div>
  <div class="child4"></div>
</div>

jQuery代码

$(".parent1 div").each(function(){
  let index = $(this).index();
  let css_class = $(this).attr("class");
  if ($("." + css_class).length < 1) {
    // Here I need that logic to insert an empty div in parent2 in same position as in parent1
  }
});

Answer 1

我认为：https://stackoverflow.com/a/3562533/11266880解释了如何在某个索引处插入子项。如果您使用for循环而不是.each来迭代项目，则可以使用它：）

Answer 2

您可以这样做：

$(".parent1 div").each(function() {
  let index = $(this).index();
  let css_class = $(this).attr("class");
  if ($(".parent2 ." + css_class).length < 1) {
    let div = "<div class=" + css_class + "></div>";
    if (index == 0) {
      $(".parent2").prepend(div);
    } else {
      $(".parent2 div:nth-child(" + index + ")").after(div);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent1">
  <div class="child1"></div>
  <div class="child2"></div>
  <div class="child3"></div>
  <div class="child4"></div>
</div>

<div class="parent2">
  <div class="child2">some text</div>
</div>

这与ehhc给出的答案中已经提到的here给出的答案没什么不同。

如何在另一个div的特定位置插入一个div？

2 个答案: