JQuery changing id attribute of all children

Question

I need help on how to write jQuery code.

I need to clone a table dynamically onclick. but then I need to change the identifiers of the table and its children every time. since there can be many children in the table, this will be difficult to do manually. I need a way to change the identifier of all child (all descendants) elements. I will always add a counter to id. (I know that children will only have access to immediate children, but I just wanted to try if that worked). If you guys know how to do this in jQuery or Javascript, please let me know.

<table id="table"> <tr id = "tr" > <td id="td"> <span id="span" value="hiii">hi</span> </td> </tr> </table> <button>Clone</button> <script> $("button").click(function () { var table = $("#table").clone(true,true) table.attr( 'id', function() { return this.id +"1"; }) alert($("#table1").children()) $("#table1").find(*).attr('id', function() { return this.id +"1"; }) table.appendTo("#table") alert(document.getElementById("tr1")) alert(document.getElementById("span1").value) }); </script> 

Answer 1

If elem is the parent of your cloned structure, and cntr is the counter you said you maintain, you can correct all identifiers in this cloned structure as follows:

 function fixIds(elem, cntr) { $(elem).find("[id]").add(elem).each(function() { this.id = this.id + cntr; }) } 

If the identifiers may already have a cloned number at the end, and you want to replace that number, you can do it like this:

 function fixIds(elem, cntr) { $(elem).find("[id]").add(elem).each(function() { this.id = this.id.replace(/\d+$/, "") + cntr; }) } 

So, based on the code you added to your question, you can do this:

 <script> var cloneCntr = 1; $("button").click(function () { var table = $("#table").clone(true,true) fixIds(table, cloneCntr); table.insertAfter("#table") cloneCntr++; }); </script> 

Working example: http://jsfiddle.net/jfriend00/wFu9K/

Note. I also changed the DOM insertion code to insertAfter() , because you cannot add one table to another as you did (the table will either go behind the existing table or inside the cell in the previous table).

---

If you are just trying to add a row, you need to clone the row, not the whole table.

You can add a cloned row to an existing table with this code:

 function fixIds(elem, cntr) { $(elem).find("[id]").add(elem).each(function() { this.id = this.id.replace(/\d+$/, "") + cntr; }) } var cloneCntr = 1; $("button").click(function () { var row = $("#table tr").first().clone(true,true); fixIds(row, cloneCntr++); row.appendTo("#table") }); ​ 

Answer 2

 $("#table1").find(*) 

it should be

 table.find("*") 

$("#table1") will not return anything in this line of code, since you have not yet added the table to the DOM. And * is the selector, which should be a string.

Answer 3

You can do

 $Element.children().each(function () { this.id = new_id; });