Javascript 增加每个输入的name属性，但在使用jQuery clone后将单选按钮分组在一起

我使用jQuery clone克隆了几种不同类型的输入。克隆每个输入时，名称属性开头的数字是否可以递增？我一直试图弄明白这一点，同时在每次增量后保持单选按钮的名称不变，以便它们仍然分组在一起

这里有一把小提琴，可以看到我正在克隆

这是我的HTML

<div class="container">
  <input type="radio" name="1_radio" class="some_vechicle" value="cars" /> Cars
  <input type="radio" name="1_radio" class="some_vechicle" value="bikes" /> Bikes
  <br />
  <br />
  <input type="text" name="2_text" class="some_name" value="" /> Model Name
  <br />
  <br />
  <input type="text" name="3_text" class="some_year" value="" /> Year
  <br />
  <br />
  <textarea name="4_area" rows="3" cols="10"  class="myArea" value=""></textarea>
  <br />
  <br />
  <input type="radio" name="5_radio" class="some_color" value="cars" /> Blue
  <input type="radio" name="5_radio" class="some_color" value="bikes" /> Red
  <br />
  <br />
  <input type="text" name="6_text" class="some_manufacturer" value="" /> Manufacturer
  <br />
  <br />
  <input type="button" class="btnAdd" value="Add" />
</div>​

下面是一个在克隆div标记一次后尝试创建的HTML示例

<div class="container">
  <input type="radio" name="1_radio" class="some_vechicle" value="cars" /> Cars
  <input type="radio" name="1_radio" class="some_vechicle" value="bikes" /> Bikes
  <br />
  <br />
  <input type="text" name="2_text" class="some_name" value="" /> Model Name
  <br />
  <br />
  <input type="text" name="3_text" class="some_year" value="" /> Year
  <br />
  <br />
  <textarea name="4_area" rows="3" cols="10"  class="myArea" value=""></textarea>
  <br />
  <br />
  <input type="radio" name="5_radio" class="some_color" value="cars" /> Blue
  <input type="radio" name="5_radio" class="some_color" value="bikes" /> Red
  <br />
  <br />
  <input type="text" name="6_text" class="some_manufacturer" value="" /> Manufacturer
  <br />
  <br />
  <input type="button" class="btnAdd" value="Add" />
</div>​
<div class="container">
  <input type="radio" name="7_radio" class="some_vechicle" value="cars" /> Cars
  <input type="radio" name="7_radio" class="some_vechicle" value="bikes" /> Bikes
  <br />
  <br />
  <input type="text" name="8_text" class="some_name" value="" /> Model Name
  <br />
  <br />
  <input type="text" name="9_text" class="some_year" value="" /> Year
  <br />
  <br />
  <textarea name="10_area" rows="3" cols="10"  class="myArea" value=""></textarea>
  <br />
  <br />
  <input type="radio" name="11_radio" class="some_color" value="cars" /> Blue
  <input type="radio" name="11_radio" class="some_color" value="bikes" /> Red
  <br />
  <br />
  <input type="text" name="12_text" class="some_manufacturer" value="" /> Manufacturer
  <br />
  <br />
  <input type="button" class="btnAdd" value="Add" />
</div>​

汽车
自行车




型号名称




年








蓝色
红色




制造商




​
汽车
自行车




型号名称




年








蓝色
红色




制造商




​

试试这个：

$(document).ready(function() {
    $('.btnAdd').click(function() {
        var b = $('.container [name]').length;
        var c = $('.container:first').clone().find('[name]').attr('name', function(i, cur) {
            var n = cur.match(/\d+/g).join('');
            var s = cur.match(/\D+/g).join('');
            return (b + ++n) + s;
        }).end()
        $('.container:last').after(c);
    });
});​

由于克隆按钮是动态生成的，您应该委派事件：

$(document).on('click', '.btnAdd', function() { // ...  })

---

这太棒了。有没有办法让克隆按钮可以创建另一个克隆？我认为：first选择器意味着只有第一个按钮才能创建克隆。布局时不应该使用换行符。

$(document).on('click', '.btnAdd', function() { // ...  })