Question

I used the following jquery to load an external html page into a div named content:

$(document).ready(function(){
     $("#content").load("content.html");
});

(function($) {  
 $(function() {  
 $('.load_link').click(function() {  
    $("#content").load("content2.html");  
    return false;  
 });  
});  
})(jQuery); 

---

The link (using <a class="load_link">) that triggers the change of content is within a row in a table. I’d like to be able to update the class assigned to a row of a table when someone clicks a link. The row that contains the link clicked should be assigned the class “rowselected” and all other rows (in that table only) should be assigned the class “rownotselected”. Only rows in this table use those class names so it should be safe to replace any occurrence of that class name.

It this possible? I’m using jquery for the very first time.

Thanks in advance for any advice!

Answer 1

How about:

 $('.load_link').click(function() {  
    $("#content").load("content2.html");  
    var $row = $(this).closest("tr");
    // find the parent <tr> and set the class
    $row.removeClass("rownotselected").addClass("rowselected");
    // Set the class of the other rows:
    $row.siblings("tr").removeClass("rowselected").addClass("rownotselected");
    return false;  
 }); 

• Find the parent tr using closest()
• Use removeClass and addClass to remove the appropriate classes
• Using siblings() to find sibling rows in the current table.

Here’s a working example: http://jsfiddle.net/andrewwhitaker/vN2ny/