如何在jQuery DOM操作中引用目标?

Question

我想使用jQuery在选定元素之后添加元素，并说我想生成一个与目标同名的新元素。

$("input:checkbox").after("<input type='hidden' name='...' value='...'/>");

我想我必须用字符串连接来做这个:

$("input:checkbox").after("<input type='hidden' name='"+ <how to refer here to the target?>+"' value='...'/>");

如何在after()的参数表达式中引用实际目标?当使用jQuery事件监听器时，我知道我得到了事件，它的target属性将是DOM元素，但这里我卡住了

Answer 1

使用each，您可以获得一个回调，从中可以引用迭代过的元素。

$("input:checkbox").each(function() {
// `this` now refers to the input
// maybe you want something like
$(this).after("<input type='hidden' name='" + this.name + "' etc
});

$("input:checkbox").each(function() {
$(this).after("<input name='" + this.name + "'>");
});
console.log(document.body.innerHTML);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="foo">