如何使用不同名稱的jquery克隆生成HTML？

Question

我有HTML這樣的：

<div id='main'> 

    <div id='child-0'> 
    <input type='text' name='data[0][name]'> 
    <input type='text' name='data[0][dob]'> 
    <input type='text' name='data[0][location]'> 
    </div> 

</div> 

<input type='button' id='add' value='Add'> 

的jQuery：

$("input#add").live('click', function(){ 
    $("#main").append("<br />"); 
    $("#child-0").clone(false).appendTo($("#main")); 
}); 

Above code is working but it is creating elements with same name。我想生成這樣的東西：

<div id='main'> 

    <div id='child-0'> 
    <input type='text' name='data[0][name]'> 
    <input type='text' name='data[0][dob]'> 
    <input type='text' name='data[0][location]'> 
    </div> 

    <div id='child-1'> 
    <input type='text' name='data[1][name]'> 
    <input type='text' name='data[1][dob]'> 
    <input type='text' name='data[1][location]'> 
    </div> 

</div> 

什麼是簡單的解決方案。

感謝

Answer 1

$("input#add").live('click', function(){ 
    $("#main").append("<br />"); 
    var cloned = $("#main div:last").clone(false).appendTo($("#main")); 
    cloned.find('[name^=data]').attr('name', function() { 
     var index = this.name.match(/\[(\d)\]/); 
     if (index != null && index.length > 1) { 
      var newIndex = parseInt(index[1], 10) + 1; 
      return this.name.replace(/\[(\d)\]/, '[' + newIndex + ']'); 
     } 
     return this.name;  
    }); 
});​