0

I was trying to clone and change all the ids of a line in a table following the answer https://stackoverflow.com/a/2977114/327247 but the code below doesn't change the first id: the row id. The javascript is 

 var $clone = $("#RowPly-R1-P1");
 $clone.find('[id]').each(function() {
   var $th = $(this);
   var newID = $th.attr('id').replace(/-P\d+$/,
                                    function(str) { return "-P"+i; });
   console.log(newID);
   $th.attr('id', newID);
 });
 console.log($clone);
 $clone.appendTo($tableToModfiy);
 $clone.after($("RowPly-R1-P1"));

while the html is 

<tbody id="tblPlayers">
 <tr id="RowPly-R1-P1">
 <td>1</td>
 <td>
   <div class="input-group">
   ............
   </div>
  </td>
  </tr>                                 
</tbody>

All the ids internal to the row are successfully changed.I cannot understand why find doesnt change the first ID.

Community
  • 1
  • 1
DdD
  • 572
  • 1
  • 5
  • 12

1 Answers1

1

Because .find() will find all the descendant elements of the clone element, not the clone element itself so the ID of the clone element is not updated.

$clone.find('[id]').addBack()

You can also try a attr('id', callback) format like

var $clone = $("#RowPly-R1-P1");
$clone.find('[id]').addBack().attr('id', function(i, id) {
  return id.replace(/-P\d+$/,
    function(str) {
      return "-P" + i;
    });
});
Arun P Johny
  • 384,651
  • 66
  • 527
  • 531
  • `.addBack()` works to me when applied to the code in the question. Regarding the second suggestion, I don't understand what `i` is passed to the callback function, could you explain it? – DdD Feb 19 '16 at 14:53