Question

Ok here is my HTML (One row of about 20)

<tr class="post-unauth message-unread">
  <td>
    <input class="check-read" type="checkbox" checked="checked" value="68"/>
  </td>
  <td class="message-description" title="Post Title">
  </td>
  <td class="message-author">Name</td>
  <td class="message-dates">3 hours ago</td>
  <td class="message-commentcount" title="0 comment(s)">
  </td>
</tr>

Now when the checkbox is clicked I need to change the class of the parent

$('.check-read').click(function() {
         $(this).parent().parent().removeClass('message-unread').addClass('message-read');
});

I’m missing somthing obvious I think as this doesnt work (Doesnt error) but nothing changes.

I even tried setting the CSS background color and no change to the HTML.

Any suggestions?

Answer 1

I think you should try closest. This is new in jQuery 1.3

$(this).closest("tr").removeClass('message-unread').addClass('message-read');

closest docs

As Mark mentions in the comment below, using a class would be more suitable here since it is less likely to be affected by changes in your table structure.

 $(this).closest(".message_row").removeClass('message-unread').addClass('message-read');

And then add “message_row” to your tr. If an unchecked box is guaranteed to have message-unread class then you can use it for your selector instead of adding a message_row class and selecting on it.