在不同的表中的<input>中重命名name属性

Question

JSFiddle:http://jsfiddle.net/pceh73g8/

在我的脚本中,我将要加载将要相同的表.以下是我的例子:

<table class="table">
<tr><td>First Name</td><td><input name="firstname" type="text"></td></tr>
<tr><td>Last Name</td><td><input name="lastname" type="text"></td></tr>
</table>

 <table class="table">
 <tr><td>First Name</td><td><input name="firstname" type="text"></td></tr>
 <tr><td>Last Name</td><td><input name="lastname" type="text"></td></tr>    
</table>

我希望编写一个脚本来通过索引重命名名称.最终,输出应该如下:

 <table class="table">
<tr><td>First Name</td><td><input name="firstname1" type="text"></td></tr>
<tr><td>Last Name</td><td><input name="lastname1" type="text"></td></tr>
</table>


 <table class="table">
 <tr><td>First Name</td><td><input name="firstname2" type="text"></td></tr>
 <tr><td>Last Name</td><td><input name="lastname2" type="text"></td></tr>    
</table>

我试图使用.each()遍历每个表,并获取每个表的索引号(附加到输入名称的后面).

我不确定如何在每个表中选择.我似乎正在选择所有:输入.我们如何选择每个表的"子"作为字段并根据索引重命名？

 $(".table").each(function(){ 
   //Get current index of the table 
   var i = $(this).index();

    $(":input").each(function(){ 
       var oldname = $(this).attr('name'); 
       $(this).attr('name',oldname+i);
    });

});

Answer 1

这是因为您$(':input')为每次迭代使用非上下文特定的选择器,因此所有输入元素将只接收最终<table>元素的索引.$(this)相反,使用DOM横向方法.

此外,.each()附带一个从零开始的索引i,所以你实际上不必在函数内重新声明它:)但是,请注意,因为它是零基础(即从零开始,而不是一个),你将不得不添加1(例如,您将拥有firstname1而不是firstname0第一次出现输入元素).

$(".table").each(function(i){ 
    $(this).find(":input").each(function(){ 
        var oldname = $(this).attr('name'); 
        $(this).attr('name',oldname+(i+1));
    });    
});

请看这里固定的小提琴:http://jsfiddle.net/teddyrised/pceh73g8/4/

根据@ dsfq的回答,您还可以利用.attr()接受函数的方法.我每天都在这里学习新东西;)