javascript - 增加每个输入的名称属性，但在使用 jQuery 克隆后将单选按钮组合在一起

Question

我有几种不同类型的输入，我正在使用 jQuery 克隆进行克隆。是否可以在克隆时为每个输入递增名称属性开头的数字？我一直在尝试解决这个问题，同时在每次递增后保持单选按钮的名称相同，以便它们保持组合在一起。

这是一个 fiddle ，可以看到我正在克隆的内容。

http://jsfiddle.net/aHA2d/

这是我的 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>​

这是我用来创建克隆的 JavaScript

$(document).ready(function() {
    $('.btnAdd').click(function() {
        var c = $('.container:first').clone(true);   
        $('.container:last').after(c);            
    });        
});​

这是我在克隆一次 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>​

Answer 1

试试这个:

$(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);
    });
});​

http://jsfiddle.net/8E3sC/

由于克隆按钮是动态生成的，因此您应该委托(delegate)事件:

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