Javascript父子项

Question

I have a table with rows that looks like this

<tr>
<td>xyz</td>
<td>xyz</td>
<td>xyz</td>
<td><span class="label-success">Active</span></td>
<td><a href="#" onclick(my-js-here.js)>change status</a></td>
</tr>
<tr>
<td>xyz</td>
<td>xyz</td>
<td>xyz</td>
<td><span class="label-pending">Active</span></td>
<td><a href="#" onclick(my-js-here.js)>another change status</a></td>
</tr>

When I click the "change status" link, I want to be able to change the class "lable-success" to "label-fail"

in my-js-here.js, how do I reference/pick out this in the in this same row

$(this).parents("tr:first").(this is where I am lost).removeClass('lable-success');
$(this).parents("tr:first").(this is where I am lost).addClass('fail');

Answer 1

Use:

$(this).parent().prev().find('span').toggleClass('label-success fail');

jsFiddle example

This will allow you to toggle the classes. If you just want to be able to make the change once, change .find('span') to .find('.label-success')