jquery - 如何在具有多个类的表中按计数重命名表行

Question

这是我的设置，我有一个作为表单一部分的表格，并且有一组包​​含多个类的行

<table>
  <tr class='class1'><!--all rows will host inputs and a button that can delete this row--></tr>
<!--the first row of a class will contain an add row button, and a set of headers-->
<!--there are about 4 rows for each class-->
  <tr class='class2'></tr>
  <tr class='class3'></tr>
  <tr class='class4'></tr>
<table>

特定类的行将对用户隐藏/不可见，直到他们按下按钮来显示特定类的表行。用户可以通过按按钮添加行和删除特定行。所有输入都有名称，并且应该自动生成

不过，我希望保持命名约定一致，保持名称范围易于管理。

我开发了一个删除函数，它可以计算行数，并根据其位置重命名所有输入，但此方法仅适用于没有类的表。 这就是我所拥有的。

/*
inputs would look like this 
<input class="class1" name="input11"></input>
<input class="class2" name="input21"></input>
*/
<script>
$(".class1").each(function(){       
  var row_index = $(this).parent().parent().index();
  var newName = "input1"+row_index;
  $(this).attr("name",newName);
});
</script>

我考虑过使用 .count() 命令，但它无法提供我想要的增量命名。

我想防止输入名称重复的情况，并防止输入名称之间有间隙的情况
即存在名称为 input13 和 input15 的输入，但 input14 不存在。

Answer 1

您可以循环遍历文档的匹配元素并将名称与索引连接起来:

var z = 1;
$.each($('.class1:nth-child(n)'),function(){
  var newName = 'Name'+z;
  $(this).attr('name',newName);
z++;
});