为克隆的fieldset中.myClass标签添加递增序号span的问题求助

问题根源 #

你当前的代码每次执行时会给所有.myClass元素追加span，但克隆操作会把原fieldset里的.myClass（包括已有的span）一起复制，导致新元素自带旧序号；如果克隆后仅针对新元素执行遍历，索引会从0开始，自然显示为1。

方案一：克隆时直接设置新序号（推荐） #

在克隆阶段就计算好新fieldset的序号，避免事后遍历所有元素，效率更高：

// 获取当前已存在的fieldset总数
var totalFieldsets = $('fieldset').length;
// 新序号 = 总数 + 1
var newIndex = totalFieldsets + 1;

// 克隆最后一个fieldset（可根据你的插件逻辑调整克隆目标）
var $newFieldset = $('fieldset').last().clone();

// 清空新fieldset里.myClass的内容（移除克隆过来的旧span），再添加新序号
$newFieldset.find('.myClass').html(`<span>${newIndex}</span>`);

// 将新fieldset添加到表单中
$newFieldset.appendTo('form');

方案二：全局重新生成序号（适合无法修改克隆逻辑的场景） #

如果没法修改克隆插件的逻辑，就先清理所有旧的序号span，再重新遍历设置正确的序号：

// 先移除所有已有的序号span，避免重复添加
$('.myClass span').remove();

// 遍历所有.myClass，按索引设置递增序号
$('.myClass').each(function(i) {
    $(this).append(`<span>${i + 1}</span>`);
});

关键注意点 #

• 克隆时务必清理新元素里的旧序号，否则会继承原元素的数字
• 不要重复执行追加span的操作，要么在克隆时单独处理新元素，要么全局重置所有序号

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