CODEWITHSUNDEEP
javascriptjqueryparent-child
fredmarks
fredmarks

Reputation: 327

Javascript Parent-Child items

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');

Upvotes: 0

Views: 71

Answers (1)

j08691
j08691

Reputation: 207901

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')

Upvotes: 1

Related Questions