jQuery克隆一个元素并更改子元素的属性以保持它们的独特

Question

我环顾了一些类似问题的答案，但我并不完全理解答案。

我有在它的表里面包含了一些投入，如以下表格...

<table class="form right 40 rewardclone_1"> 
<tr>   
<td><label for="financial_goal_1">Amount</label></td> 
<td>Pledge <span class="dollar">&#36;</span><input id="financial_goal_1" class="text dollars" type="text" name="financial_goal_1" /> or more</td> 
</tr> 
<tr> 
    <td><label for="maximum_1">Maximum</label></td> 
<td><input id="maximum_1" class="text dollars" type="text" name="maximum_1" /> available (blank for unlimited)</td> 
</tr> 
<tr> 
<td><label for="reward_1">Reward:</label></td> 
<td><textarea id="reward_1" name="reward_1"></textarea></td> 
</tr> 
</table> 

我已经成功地创造出克隆点击时这整个表的按钮。

$('#add_reward').click(function() {   
    $('.rewardclone').clone().appendTo('#rewards_container');  
}); 

的问题是我需要的属性（reward_1，maximum_1等），所有这些数字各表克隆时间递增。

任何帮助将不胜感激！

jQuery level：Beginner。

谢谢。

Answer 1

由于它是一个小桌子，我更喜欢使用它作为一个模板，而不是克隆，并找到匹配的元素。

注意：根据服务器技术的不同，您还可以首次从服务器加载rewardTableTmpl，然后使用该模板作进一步的使用。

DEMO

$(function() { 
    var rewardTableTmpl = '<table class="form right 40 rewardclone">' + 
     '<tr><td><label for="financial_goal_{NUM}">Amount</label></td>' + 
     '<td>Pledge <span class="dollar">&#36;</span><input id="financial_goal_{NUM}" class="text dollars" type="text" name="financial_goal_{NUM}" /> or more</td>' + 
     '</tr><tr>' + 
     '<td><label for="maximum_{NUM}">Maximum</label></td>' + 
     '<td><input id="maximum_{NUM}" class="text dollars" type="text" name="maximum_{NUM}" /> available (blank for unlimited)</td>' + 
     '</tr><tr>' + 
     '<td><label for="reward_{NUM}">Reward:</label></td>' + 
     '<td><textarea id="reward_{NUM}" name="reward_{NUM}"></textarea></td>' + 
     '</tr></table>'; 

    $('#add_reward').click(function() { 
     $('#rewards_container').append(rewardTableTmpl.replace(/{NUM}/g, $('rewardclone').length + 1)); 
    }); 
}); 

Answer 2

这将是你的情况下，简单的解决方案：

$('#add_reward').click(function() {   
    var $x = $('.rewardclone').clone(); 
    $x.appendTo('#rewards_container'); 
    $x.find('input[id], textarea[id], label[for]').each(function() { 
     if($(this).is('label')) { 
      var new_id = parseInt($(this).attr('for').split('_').pop(), 10) + 1; 
      $(this).attr('for', new_id); 
     } else { 
      var new_id = parseInt(this.id.split('_').pop(), 10) + 1; 
      this.id = new_id; 
     } 
    });  
}); 

Answer 3

我做了一个小的调整，以塞尔瓦库玛的Arumugam的答案，因为当我打印出来{NUM}，它没有改变。

$(function() { 
    var rewardTableTmpl = '<table class="form right 40 rewardclone">' + 
     '<tr><td><label for="financial_goal_{NUM}">Amount</label></td>' + 
     '<td>Pledge <span class="dollar">&#36;</span><input id="financial_goal_{NUM}" class="text dollars" type="text" name="financial_goal_{NUM}" /> or more</td>' + 
     '</tr><tr>' + 
     '<td><label for="maximum_{NUM}">Maximum</label></td>' + 
     '<td><input id="maximum_{NUM}" class="text dollars" type="text" name="maximum_{NUM}" /> available (blank for unlimited)</td>' + 
     '</tr><tr>' + 
     '<td><label for="reward_{NUM}">Reward:</label></td>' + 
     '<td><textarea id="reward_{NUM}" name="reward_{NUM}"></textarea></td>' + 
     '</tr></table>'; 

var count =0; 
    $('#add_reward').click(function() { 
     count++; 
     $('#rewards_container').append(rewardTableTmpl.replace(/{NUM}/g, count)); 
    }); 

});