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级别：初学者。

谢谢。

- user1378715

---

可能是JQuery克隆重复ID的重复问题。 - cbp

Answer 1

这对您的情况将是一个简单的解决方案：

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

- Paolo Bergantino

---

+1 但如果这是简单的解决方案，我不想想象复杂的解决方案... - Eran Medan

Answer 2

由于这是一张小表格，我更喜欢将其用作模板而不是克隆并查找匹配元素。

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

演示

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

- Selvakumar Arumugam

---

在你的函数中，你应该使用一个计数器。当我打印出 {NUM} 时，class.length 似乎不起作用。它没有改变。所以我添加了 'var count =0; $('#add_reward').click(function() { count++; $('#rewards_container').append(rewardTableTmpl.replace(/{NUM}/g, count)); });' - WoShiNiBaBa

Answer 3

我对Selvakumar 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));
    });

});

- WoShiNiBaBa