Change id of clone children in jQuery

Question

I have a table on which I have a hidden line that I clone in order to add new lines dynamically.

var $clone = $('#table-invoicing').find('tr.hide').clone(true).removeClass('hide');
$('#table-invoicing').find('table').append($clone);

Each line have a id and a data-type. The hidden line is set an id ending in 99. I would like to change this id when I clone the hidden line.

I found similar topics, but for some reason I don't manage to include it in my script. When I clone the line, then there is 2 elements with same id, so a selector by id won't work.

I tried :

$clone.$('#invoicing-row-descr-99').attr("id", "newID");

but then it tells me that $clone is not a function.

Any idea ?

`$clone.find('#invoicing-row-descr-99').attr("id", "newID");` — ᔕᖺᘎᕊ, Jul 27 '15 at 10:58

Bhojendra Rauniyar · Accepted Answer · 2015-07-27T11:39:03.340

4

$clone.$('#invoicing-row-descr-99').attr("id", "newID");

but then it tells me that $clone is not a function.

Because $clone is an object. Just use attr or prop for the cloned element:

$clone.attr("id", "newID");//change cloned element id

As per your comment, use like this:

$clone.find('your_element').attr("id", "newID");

edited Jul 27 '15 at 11:39

answered Jul 27 '15 at 10:59

Bhojendra Rauniyar

83,432
35
168
231

Thanks but the problem here is that I don't need to modify the tr id, but the td inside the tr. And there is 4 td inside – Vincent Teyssier Jul 27 '15 at 11:06
sorry, but not getting you. – Bhojendra Rauniyar Jul 27 '15 at 11:07
As you can see, what I clone is the row by selecting tr : $('#table-invoicing').find('tr.hide') But the id I would like to change is the id of the cloned td inside this cloned tr. Sorry if it was unclear in my question – Vincent Teyssier Jul 27 '15 at 11:24
ah now it works!! thanks a lot! If you have a minute, can you explain me why I can't use prop on find ? – Vincent Teyssier Jul 27 '15 at 11:36
sorry? you can use find. not? – Bhojendra Rauniyar Jul 27 '15 at 11:47
oh and one more thing... sorry but still related to the issue. I try to change the data of the td the same way I change the id : $clone.find('[data-date="99"]').data("date", idInsert); But unfortunately that doesn't work :/ I guess it is a selector issue once again :/ – Vincent Teyssier Jul 27 '15 at 11:47
yes I can use find, it works perfect, just wondering why using attr and not prop :) – Vincent Teyssier Jul 27 '15 at 11:48
1

you may use any. But want to know difference? Then look at [this](http://stackoverflow.com/questions/5874652/prop-vs-attr) – Bhojendra Rauniyar Jul 27 '15 at 11:49

score 3 · Answer 2 · answered Jul 27 '15 at 11:01

3

.prop() Is a good practice in current versions of jQuery.

$clone.prop("id", "yourId");

You'll need to use it before you are appending it.

answered Jul 27 '15 at 11:01

rrk

15,677
4
29
45

Thanks, I'll use prop! – Vincent Teyssier Jul 27 '15 at 11:06
2

@VincentTeyssier here is a jsFiddle version if you need more help https://jsfiddle.net/msy9dgkg/ – Canvas Jul 27 '15 at 11:12
Thanks a lot, actually I know how to clone and use prop, but I explained my issue not very well. What I would like to change is the id of the cloned td that are inside the cloned tr. – Vincent Teyssier Jul 27 '15 at 11:26

Change id of clone children in jQuery

2 Answers2