javascript - 追加的当前元素

Question

我正在努力做到这一点。 我怎样才能通过 jQuery 的 append 方法获取当前元素？ 我知道它会附加到集合中的每个元素，但没有办法让当前元素被迭代？

假设我们有这个 HTML

<div class="parent" id="1">
    <div class="list"></div>
</div>
<div class="parent" id="2">
    <div class="list"></div>
</div>
... more dynamically generated parents

每个 div 都是通过之前的另一个附加调用生成的，所以我认为这并不重要，但我会留下信息以防万一。

jQuery

$(".list").append('<input name="id[IDOFPARENT][]"/>');

这里我将输入附加到每个框，但它应该包含父级的 ID(到目前为止我只使用了一个静态 ID。

我试过

$(this).closest(".parent").attr("id")

但是它说 undefined 因为 this 是:

Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage, sessionStorage: Storage, webkitStorageInfo: DeprecatedStorageInfo…}

(我猜是文件)

有什么方法可以解决它而不必切换到“foreach”循环吗？

Answer 1

遍历您通过类名获得的每个元素，因为 $('.list') 会为您提供一个数组。对于迭代，您可以使用 .each() 函数

$(function(){
  $(".list").each(function(){
    var id = $(this).closest('.parent').attr('id');
    var html = '<input name="id_' + id + '"/>'
    $(this).append(html);
  })
  
  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" id="1">
    <div class="list"></div>
</div>
<div class="parent" id="2">
    <div class="list"></div>
</div>
<div class="parent" id="3">
    <div class="list"></div>
</div>
<div class="parent" id="4">
    <div class="list"></div>
</div>