Question

让我在开头说一下我确实使用jQuery，以便可以利用它们的可用功能。

我有一些类似的HTML设置

<div id=12 class="comp">
  <div class="random">
    <div class="addHere">
    </div>
  </div>
</div>
<div id=34 class="comp">
  <div class="random">
  </div>
</div>
<div id=56 class="comp">
  <div class="random">
    <div class="addHere">
    </div>
  </div>
</div>

我想在类名称为“ addHere”的每个元素之后添加一个输入元素。足够简单，但是我希望每个输入都具有一个类，该类与具有“ comp”类的最父元素的id相同，这意味着最后它应该看起来像这样

<div id=12 class="comp">
  <div class="random">
    <div class="addHere">
      <input type="text" class="12">
    </div>
  </div>
</div>
<div id=34 class="comp">
  <div class="random">
  </div>
</div>
<div id=56 class="comp">
  <div class="random">
    <div class="addHere">
      <input type="text" class="56">
    </div>
  </div>
</div>

我该如何实现？我能想到的唯一方法是遍历具有类名称comp的每个元素，并检查它是否在其中任何地方都具有“ addHere”类，如果存在，请将id保存到数组中，然后找到所有“ addHere”元素，并循环遍历，同时添加从先前数组获得的ID。

它可以工作，但是我对这种与前端相关的js还是有点陌生，这涉及循环两次，所以我希望有另一种更干净的方法。

Answer 1

您可以使用addHere方法遍历每个.each() div，然后使用.comp使用类.closest()获取其父div。一旦获得其父级，就可以使用.attr("id")来获得它的id。

最后，您可以将.append()元素.addHere细分为

。

但是，具有相同id的多个元素是无效的HTML，相反，您应该使用class：

$(".comp .addHere").each(function() {
  const id = $(this).closest(".comp").attr("id");
  $(this).append(`<input type='text' value='${id}' class='${id}'/>`);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=12 class="comp">
  <div class="random">
    <div class="addHere">
    </div>
  </div>
</div>
<div id=34 class="comp">
  <div class="random">
  </div>
</div>
<div id=56 class="comp">
  <div class="random">
    <div class="addHere">
    </div>
  </div>
</div>

Answer 2

$('.comp').find('.addHere').map(function(index, item){    	
  $(item).append(` <input type="text" id="${$(this).parents('.comp').attr('id')}">`)
})

<div id=12 class="comp">
  <div class="random">
    <div class="addHere">
    </div>
  </div>
</div>
<div id=34 class="comp">
  <div class="random">
  </div>
</div>
<div id=56 class="comp">
  <div class="random">
    <div class="addHere">
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

在获取父元素的ID的同时追加元素

2 个答案: