Applying class to an element - JQuery

Question

I am working on a web page that has a large number of tables. The JQuery script processes each row and decides what CSS style needs to be applied to it. I am using this snippet to apply a class to the table cell

$myElem.parents('td').eq(0).attr('class', 'requiredClass');

Functionally, it works as expected. However, in IE7.0, it takes 16ms to run this. Given the number of rows on the page, this adds up pretty quickly to atleast half a second.

How can I make this run faster?

Answer 1

Try using addClass method.

$("#ID").addClass("newclass");

And use removeClass when you want to remove it.

The problem might be that handling class as attribute may not be fast in IE (this is my guess as I don't use IE).

Answer 2

try

$myElem.parents('td').eq(0).addClass('requiredClass');

Answer 3

Use addClass() method, it adds the specified class(es) to each of the set of matched elements.

$Elem.parent('td').addClass('requiredClass');

Answer 4

I think your problem is with calling the eq function. It appears you only want the first td so below is a much more appropriate selector. I am also using addClass function to set the class name, as opposed to using attr

$myElem.parent('td:first').removeClass().addClass('requiredClass');

Answer 5

In light of your comment in the Question, this should be the most performant

$Elem.parent('td').addClass('requiredClass');

This uses parent() instead of parents(), the former only looking at the immediate parent, the latter looking at all parents up to but excluding the root node.

The <td> is most likely superfluous in parent() too as it acts to filter out those parent nodes that are not a <td> element. Since you are processing each row at a time, I would imagine that you can guarantee that the parent in each case is a <td> and therefore I would remove that filter too. So it becomes

$Elem.parent().addClass('requiredClass');

It may be faster still if, rather than processing each row at a time, you could identify the set of rows that need to have a certain class applied to the <td> in question and then issue one selector to the add the class. This might not be possible, it depends on the check being performed, but just a thought nonetheless.

EDIT:

You say you need to remove an unknown class before adding the new one but don't know what the class name will be in each case. Calling removeClass() without a class name string parameter will remove all classes. In case you didn't know, Elements can have multiple classes defined, each one separated by a space, for example, <td class="class1 class">. jQuery's addClass() command will ensure that each new class name added will be separated from any others by a space. So, the selector may now look like

$Elem.parent().removeClass().addClass('requiredClass');