jQuery克隆功能后更新子元素的属性答案

【问题标题】：update attributes of child elements after jQuery clone functionjQuery克隆功能后更新子元素的属性
【发布时间】：2011-11-03 21:28:40
【问题描述】：

我有一些代码似乎可以与旧版本的 jQuery 一起工作，直到 1.4 我认为。我注意到它在 1.4.4 中肯定会停止工作。并且仍然不适用于 1.6.2。我做了一些研究，在这个问题上有一些类似的问题，但我没有发现在执行 clone() 之后需要更新的不仅仅是 id 的情况。

有谁知道我可以如何重新编写它以使其适用于当前版本的 jQuery？

 //Add dynamic Shot handling
$('#link_addShot').click(function() {
  var cloned = $('#tbl_shots tbody tr:last').clone(true);
  prevNum = numOfShots;
        numOfShots = numOfShots + 1;
  $('#shot_number_' + prevNum, cloned).attr('name', 'shot_number_' +  numOfShots);
        $('#shot_type_id_' + prevNum, cloned).attr('name', 'shot_type_id_' +  numOfShots);
        $('#player_id_' + prevNum, cloned).attr('name', 'player_id_' +  numOfShots);

        $('#shot_number_' + prevNum, cloned).attr('id', 'shot_number_' +  numOfShots);
        $('#shot_type_id_' + prevNum, cloned).attr('id', 'shot_type_id_' +  numOfShots);
        $('#player_id_' + prevNum, cloned).attr('id', 'player_id_' +  numOfShots);
  $('#removeLink', cloned).html('<a href="#">Remove</a>');
  $('#removeLink a', cloned).click(function() {
    $(this).parent().parent().parent().remove();
    return false;
  })

  $('#shot_type_id_' + numOfShots, cloned).val(0);
        $('#player_id_' + numOfShots, cloned).val(0);

  $('#tbl_shots').append(cloned);
  $(this).removeClass('form_button_hover');
  return false;     
});

    //remove link handling
    $(".link_remove").click(function() {
        $(this).parent().parent().parent().remove();
        return false;
    });

哦，如果我包含我要克隆的 tr 标记可能会有所帮助：

<tr>
<td><input id="shot_number_5" type="hidden" value="" name="shot_number_5">
<select id="shot_type_id_5" class="shot_type_id" name="shot_type_id_5">
  <option value="0">Unknown</option>
  <option value="1">Tee</option>
  <option value="2">Fairway</option>
  <option value="3">Rough</option>
  <option value="4">Bunker (fairway)</option>
  <option value="8">Bunker (greenside)</option>
  <option value="5">Fringe</option>
  <option selected="selected" value="6">Green</option>
  <option value="7">Penalty</option>
  <option value="9">Concede</option>
  <option value="10">Pick Up</option>
</select></td>
<td class="td_last" align="center"><div id="removeLink"> <a class="link_remove" href="">Remove</a> </div></td>
</tr>

【问题讨论】：

欢迎来到 StackOverflow！我很高兴您能够解决您的问题。让人们知道问题已解决的最佳方法是将您上次编辑的信息作为您自己问题的答案，然后接受它作为答案。编码愉快！

标签： jquery clone attr

【解决方案1】：

好的，如果其他人正在寻找类似的东西，找到了解决方案。我认为这既是逻辑问题，也是语法问题。但不确定我是否真的需要更改语法。逻辑问题是 prevNum 实际上不正确，因此我将其更改为在 ID 后使用带有通配符的 find() 函数，因为我知道克隆元素中只有一个。

//Add dynamic Shot handling
$('#link_addShot').click(function() {
numOfShots = numOfShots + 1;
var cloned = $('#tbl_shots tbody tr:last').clone(true);
cloned.find('#[id*=shot_number_]').attr('id', 'shot_number_' +  numOfShots).attr('name','shot_number_' +  numOfShots);
cloned.find('#[id*=shot_type_id_]').attr('id', 'shot_type_id_' +  numOfShots).attr('name','shot_type_id_' +  numOfShots).val(0);            
cloned.find('#[id*=player_id_]').attr('id', 'player_id_' +  numOfShots).attr('name','player_id_' +  numOfShots).val(0);
cloned.find('.removeLink').html('<a href="#">Remove</a>');
cloned.find('.removeLink a').click(function() {
$(this).parent().parent().parent().remove();
return false;
});

$('#tbl_shots').append(cloned);

$(this).removeClass('form_button_hover');
return false;     
});

【讨论】：