Javascript 在获取父元素的id时追加元素

让我先说一下，我实际上是在使用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还是有点陌生，这涉及到两次循环，所以我希望有另一种更干净的方法。

你可以通过使用

.each（）

方法循环每个

addHere

div来做到这一点，然后使用

.comp

类获得它的父div。一旦获得了它的父项，您就可以使用

.attr（“id”）

来获取它的

id

最后，您可以

.append（）

将元素添加到

.addHere

div中

但是，多个元素具有相同的

id

是无效的HTML，您应该使用

类

：

$（“.comp.addHere”）.each（函数（）{
const id=$（this）.closest（.comp”）.attr（“id”）；
$（this.append（`）；
});
您可以通过使用
.each（）
方法在每个
addHere
div上循环，然后使用
.closest（）
方法通过类
.comp
获取其父div来完成此操作。一旦获得了它的父项，您就可以使用
.attr（“id”）
来获取它的
id

最后，您可以
.append（）
将元素添加到
.addHere
div中

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


$（“.comp.addHere”）.each（函数（）{
const id=$（this）.closest（.comp”）.attr（“id”）；
$（this.append（`）；
});


$（'.comp'）.find（'.addHere'）.map（函数（索引，项）{
$（项）。追加（``）
})


$（'.comp'）.find（'.addHere'）.map（函数（索引，项）{
$（项）。追加（``）
})

同一文件中不能有多个ID-这是无效的HTML。考虑使用类。对，在我的实际代码中，我使用数据字段。写这个小模板只是为了一个简单的例子。你不能在同一个文件中有多个ID——这是无效的HTML。考虑使用类。对，在我的实际代码中，我使用数据字段。刚刚写了这个小模板作为一个简单的例子。这是完美的，谢谢！是的，我无意中写下了这个id，而不是在我的实际代码中使用它：P@HelloMellow啊，我明白了，不用担心：）这太完美了，谢谢！是的，我无意中写下了这个id，而不是在我的实际代码中使用它：P@HelloMellow啊，我明白了，不用担心：）