JavaScript/jQuery中如何创建带索引的动态类名

这种动态拼接索引生成类名、ID的写法完全可行，不管是原生JS还是jQuery都能正常识别解析，你给出的核心插入代码语法本身没有问题：

$(`<tr class='data${i}'><td id='value${i}'></td></tr>`).insertAfter('#tbl-geburtstage_row_title')

你现有代码里的几个bug，修完就能正常运行 #

• 逻辑判断里误用了位运算符&，要改成逻辑与&&。单&是做二进制按位运算的，不是用来做条件判断的逻辑连接，会导致判断结果不符合预期。
• 选择器括号位置写错了：$(tr.data${i - 1}.length) 这个写法是错的，.length是jQuery对象的属性，要放在选择器括号外面，正确写法是$(tr.data${i - 1}).length，不然会把.length当成选择器的一部分，根本拿不到对应元素。
• 额外提个优化建议：没必要给每一行生成单独的带序号类名，你可以给所有动态插入的生日行加一个统一的类比如birthday-row，需要取对应顺序的行时，直接用$('.birthday-row').eq(i)就能拿到第i个元素，后续改逻辑、选元素都更方便，不用每次拼字符串生成选择器。

修正后的核心循环代码 #

const birthdayTotal = Object.keys(birthdays).length;
for (let i = 1; i <= birthdayTotal; i++) {
  console.log(`query ${i}`)
  if ($(`tr.data${i}`).length && $(`#value${i}`).text() != "") {
    // 行已存在且内容不为空，跳过新增逻辑
    continue;
  }
  const rowTemplate = `<tr class='data${i}'><td id='value${i}'></td></tr>`;
  if ($(`tr.data${i - 1}`).length) {
    $(rowTemplate).insertAfter(`tr.data${i - 1}`);
  } else {
    $(rowTemplate).insertAfter('#tbl-geburtstage_row_title');
  }
}

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