使用jQuery的prepend方法插入内容时如何传入动态计数变量？

实现方案 #

你可以利用jQuery遍历元素的索引参数实现动态编号，两种常用实现方式如下：

方法1：prepend 传入回调函数（最简写法）

jQuery的prepend()方法支持传入回调函数，函数第一个参数为当前元素的索引（从0开始计数），直接拼接编号即可：

$("p").prepend(function(index) {
  // 索引从0开始，+1后匹配你需要的1、2、3序号规则
  const serial = index + 1;
  return `<input type='checkbox' name='var${serial}' id='var${serial}' /><label for='var${serial}'>var${serial}</label>`;
})

注意：你原代码末尾多了冗余的</span>标签，上述代码已移除，如果需要span包裹控件可以自行补全外层标签。

方法2：each 遍历实现（逻辑更直观）

如果后续要对计数做更多自定义逻辑，可以用each()遍历配合计数器实现：

let counter = 1;
$("p").each(function() {
  $(this).prepend(`<input type='checkbox' name='var${counter}' id='var${counter}' /><label for='var${counter}'>var${counter}</label>`);
  counter++;
})

最终生成效果 #

两种方式最终输出的DOM结构完全一致：

<p><input type='checkbox' name='var1' id='var1' /><label for='var1'>var1</label>aaa</p>
<p><input type='checkbox' name='var2' id='var2' /><label for='var2'>var2</label>bbb</p>
<p><input type='checkbox' name='var3' id='var3' /><label for='var3'>var3</label>ccc</p>

内容的提问来源于stack exchange，提问作者Jerry2