Table Header manipulation
<p>I'm using this in conjunction with the tablesorter plug-in, my goal is to have a blank class attribute in any column that is not being sorted, i.e. when I click one column the class attributes in the others are removed.</p>

<p>I have a table with a whole bunch of headers, basically what I want to be able to do is when I click on a table header, I wanna all other tables to have their css class removed, but the one I'm clicking on should be toggling between two css classes.  I'm using a rel tag within an anchor tag in the content of the header, I do this because we're using XHTML Strict and rel can't be defined in the table header tag itself.  My code is as follows:</p>

<pre><code>$(function() {
  $("a[rel='Header']").click(function () {

      $("a[rel='Header']").each(function() {
        if($(this).attr("class")=="sort-up"){$(this).removeClass("sort-up");}
        if($(this).attr("class")=="sort-down"){$(this).removeClass("sort-down");}
       })

   if($(this).attr("class")==""){$(this).addClass("sort-up");}
   $(this).toggleClass("sort-down")
      });   
});
</code></pre>

<p>What I'm assuming it should be doing is as soon as a header is clicked, cycle through each header, if it contains the class attribute "sort-up", remove it; if it contains the class attribute "sort-down", remove it.  Then, for the currently clicked header, add the class attribute "sort-up" and toggle between the "sort-down" attribute.  My problem is that when I click on one header, if it's using the "sort-down" class, represented in the header by a down arrow(\/), then I go and click on another header in a different column, the attribute doesn't get removed.  It will, however, remove the "sort-up" class (^).<br />
Here is a list of my header in XHTML:</p>

<pre><code>&lt;thead&gt;
   &lt;tr&gt;
    &lt;th&gt;&lt;a rel = "Header" href="#" class=""&gt;Title&lt;/a&gt;&lt;/th&gt;
    &lt;th&gt;&lt;a rel = "Header" href="#" class=""&gt;Instructor&lt;/a&gt;&lt;/th&gt;
    &lt;th class="{sorter: 'usLongDate'}"&gt;&lt;a rel = "Header" href="#" class=""&gt;Date&lt;/a&gt;&lt;/th&gt;
    &lt;th class="{sorter: false}"&gt;Start/End&lt;/th&gt;
    &lt;th&gt;&lt;a rel = "Header" href="#" class=""&gt;Seats Available&lt;/a&gt;&lt;/th&gt;
    &lt;th&gt;&lt;a rel = "Header" href="#" class=""&gt;Enrolled&lt;/a&gt;&lt;/th&gt;
    &lt;th&gt;&lt;a rel = "Header" href="#" class=""&gt;Pre-Requisites&lt;/a&gt;&lt;/th&gt;
    &lt;th class="{sorter: false}"&gt;Workshop Actions&lt;/th&gt;
   &lt;/tr&gt;
  &lt;/thead&gt;
</code></pre>

<p>UPDATED with changes recommended by waxwing, stupid mistake, it works, I wasn't paying attention to the syntax of the hasClass.  Thanks.</p>

<pre><code>$(function() {
  $("a[rel='Header']").click(function () {

      $("a[rel='Header']").each(function() {
        if($(this).hasClass("sort-up")){$(this).removeClass("sort-up");}
        if($(this).hasClass("sort-down")){$(this).removeClass("sort-down");}
       })

   if($(this).hasClass("")){$(this).addClass("sort-up");}
       if ($(this).hasClass("sort-up")) { 
           $(this).removeClass("sort-up").addClass("sort-down"); 
       } else {
           $(this).removeClass("sort-down").addClass("sort-up");
       }
   if($(this).attr("title") == "Sort column in ascending order"){
    $(this).attr({title : "Sort column in descending order"});}
   else {$(this).attr({title : "Sort column in ascending order"});} 
      });   
});
</code></pre>
