Why is this function not replacing the class

Question

I have a function that I'm testing, it is supposed to check all table headers to see if it has a particular class, remove it and replace it with another class. I'm using this to switch metadata parsers for the tablesorter plugin. The code I have so far is below:

$(function(){
    $("th").each(function(){
     if ($(this).hasClass("{sorter: 'usLongDate'}")) { 
      $(this).removeClass("{sorter: 'usLongDate'}").addClass("{sorter: 'false'}");
         }  
    });
});

$(function() {
    $("table").tablesorter({}); 
});

I'm trying to switch the class parser in the following header to the false inline parser.

<th class="{sorter: 'usLongDate'}"><a rel = "Header" href="#" title="Sort column in decending order" class="">Date</a></th>

Of course this isn't my only header, I'm just testing it on this one, I'm assuming the rest of the headers shouldn't be affected, tablesorter should still be sorting those. But when I run the html file, nothing works. Is there something I'm missing?? Thanks.

NOTE: Just to avoid confusion, the tablesorter plugin for jQuery can use inline parsers within the class attribute of a table header in order to determine how and/or whether a column should be sorted.

UPDATE: Tried Vincent Robert's suggestion, unfortunately it doesn't work. In regards to whether or not addClass and removeClass can handle these. I have an original function that was able to add the disable parser to all classes,

$("th[class='']").addClass("{sorter: 'false'}");

this comes from Paolo Bergantino, and it worked great. I'm just trying to extend it a bit.

Answer 1

Correct me if I'm wrong. But class="{sorter: 'usLongDate'}" is not a valid class name. Classes are names separated by spaces. class="class1 class2" means the element has two classes class1 and class2 not one class. Valid class names are explained here.

EDIT

If you want to be able to change the class anyway use attr instead of add/remove class

$(this).attr('class', 'myNewClass');

and to remove use:

$(this).removeAttr('class');

Answer 2

Should you be calling

$("table").tablesorter({});

Before trying to look at the classes? I'm assuming it's the plugin that is putting those class names in place ?

Answer 3

I don"t think addClass() or removeClass() can handle these kind of "classes". You should instead directly access the "class" attribute.

Now I am not familiar with this plugin...

$(function(){
    $("th").each(function(){
        if ($(this).attr("class") == "{sorter: 'usLongDate'}") { 
                $(this).attr("class", "{sorter: 'false'}");
            }           
    });
});

EDIT

Just browsed the documentation and you could use the options way instead of the class way:

$('table').tablesorter({ 
    headers: $('th').map(function(i)
    { 
        return { sorter: false /* or whatever you want based on $(this) content */ }; 
    }) 
});

This should work as long as you are calling it before any tablesorter() call.

Answer 4

This is probably what you're looking for.

$(document).ready(function() { 
    $("th[class*='usLongDate']").each(function(){
        $(this).removeClass("{sorter: 'usLongDate'}").addClass("{sorter: false}");
    });
    $("table").tablesorter(); 
});

The issue probably stems from the fact that classes are separated by spaces. Technically, "{sorter:" and "'usLongDate'}" are two different classes. I don't know exactly how TableSorter is handling them, but removing "{sorter:" and then adding it back in should keep it next to "false}".