jQuery strange problem

I’m trying to remove sort ascending / descending from any th in the thead and apply it to the newly selected td…

The code below works. But notice that I’m only removing sort from all the th items in the thead. What’s strange is when I try to do .removeClass(‘sort ascending descending’); it no longer allows the th to toggle - meaning that if it’s ascending go descending and vice verse… It’s strange…


function SortSetup(table) {
    $('.thead', table).delegate('a', 'click', function(event) {
        //First thing we need to do is remove sort from all th
        $(this).parents('tr').find('th').removeClass('sort');

        var th = $(this).parent('th');
        
        if (th.hasClass('ascending')) {
            th.removeClass('ascending').addClass('sort descending');
        } else {
            th.removeClass('descending').addClass('sort ascending');
        }

    });
}


<tr class="thead">
<th scope="col" class="cInput"><input type="checkbox"  value="users"></th>
<th scope="col" class="c3"><a rel="UserName"  href="#">Username</a></th>
<th scope="col" class="c2"><a rel="FirstName" href="#">First  Name</a></th>
<th scope="col" class="c2"><a rel="LastName" href="#">Last  Name</a></th>
<th scope="col" class="c4"><a rel="Email"  href="#">Email</a></th>
<th scope="col" class="c2"><a rel="RoleName"  href="#">Role</a></th>
<th scope="col" class="c1"><a rel="CreateDate"  href="#">Created</a></th>
<th scope="col" class="c1 sort descending"><a  rel="LastLoginDate" href="#">Last Login</a></th>
<th scope="col" class="cActionable">&nbsp;</th>
</tr>

If you remove “ascending” th.hasClass(“ascending”) will always be false (since you removed it), and you will always end up in the “else” part of the if-statement.

Why do you want to .removeClass(“sort acending descending”) ?