jQuery Traversing

Question

My page has this design.

<tr id="master">
    <td id="row1"> <textbot> </td>
    <td id="row2"> <linkbutton> </td>
</tr>

I am cloning the same TR onclick of the link button and the current link button will be hidden. so a new row will be created.

consider I have cloned thrice

<tr id="master">
    <td id="row1"> <textbot> </td>
    <td id="row2"> <linkbutton> </td>
</tr>
<tr id="master">
    <td id="row1"> <textbot> </td>
    <td id="row2"> <linkbutton> </td>
</tr>
<tr id="master">
    <td id="row1"> <textbot> </td>
    <td id="row2"> <linkbutton> </td>
</tr>

Now I want to show the second row's link button.

I am trying with

$(this).parents('#master :last').prev().children('#row2).show();

But its not working.

Answer 1

You can't/shouldn't clone elements that have IDs, because IDs are supposed to be unique in a document. Although a browser will happily let you have the same ID twice, Javascript and jQuery do not forgive you for this and things will not work as expected. The proper way to group elements is by classes.

So if you switch your code to this:

<tr class="master">
  <td class="row1"> <textbot> </td>
  <td class="row2"> <linkbutton> </td>
</tr>

Your selector might look like this:

$('tr.master').eq(1).find('td.row2').show();

Answer 2

you know, ID must be unique .. so i recommend to change all id to class.

i think the syntax for parrent should :

$('#master:parent');