jQuery DOM操作中如何在after()方法内引用选中的目标元素？

方案1：使用after()回调参数（推荐） #

after()方法支持传入回调函数，回调会针对每个选中的元素执行，返回值为要插入的内容，函数内this指向当前的目标DOM元素：

$("input:checkbox").after(function() {
  return `<input type='hidden' name='${this.name}' value='...'/>`;
});

该写法自动适配多元素选中场景，每个checkbox后都会生成和自身name属性一致的隐藏输入框。

方案2：结合each()手动遍历实现 #

如果需要用字符串拼接的写法，可以先遍历所有选中的checkbox，在遍历回调中获取当前元素引用：

$("input:checkbox").each(function() {
  $(this).after("<input type='hidden' name='"+ this.name +"' value='...'/>");
});

内容的提问来源于stack exchange，提问作者g.pickardou