JQuery .Parent()
Ok here is my HTML (One row of about 20)
<tr class="post-unauth message-unread">
<td>
<input class="check-read" type="checkbox" ch开发者_如何学Pythonecked="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?
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.
Just to offer an alternative solution. In cases like this, I prefer to attach the click to the TR and then let the click event of all the child elements bubble up to the TR. You could do something like this:
$(".classForEachPost").click(function(e){
var $target = $(e.target);
var $this = $(this);
if($target.is(".check-read:checkbox")){
$this.removeClass("message-unread").addClass("message-read");
}
// check for other click events in the TR you might want to act upon
});
I like this pattern when there are a lot of actions in a row, div, etc. It stops a lot of traversing up and down the graph and centralizes all the event handles in one place. It makes it a lot easier for me to wrap that in a jQuery plugin.
$.fn.myPostRow = function(){
this.click(function(e){
// same code as above
}
};
Then you have a plugin for the entire row that you could just call like:
$(".tableOfPosts TR").myPostRow();
This would be the only JavaScript mixed in with the HTML markup and the plugin can be moved to a JS file.
The answer completely digressed from your initial question, but hopefully it is still useful.
精彩评论