CODEWITHSUNDEEP
javascriptjqueryperformanceinternet-explorerjquery-selectors
TruMan1
TruMan1

Reputation: 36118

Rewrite this jQuery find selector?

I am having performance issues in IE and using the browser profiler, I narrowed it down to this: 

$tbody.find('> tr:not(.t-grouping-row,.t-detail-row)')

What does this exactly mean and any ideas on how to rewrite this so it performs better in IE (maybe pure Javascript if it makes sense)?

Upvotes: 0

Views: 162

Answers (2)

Fresheyeball
Fresheyeball

Reputation: 30015

My answer is theoretical.

$tbody.children('tr').filter(function(){
    var that = $(this);
    return (!that.hasClass('t-grouping-row') && !that.hasClass('t-detail-row');
})

.children is more efficient than .find because it has less elements to look through, at this point the sizzle engine stops (sizzle looks like it might be your problem). The :not is replaced with .filter which would check attributes rather than selecting.

Upvotes: 1

Florian Margaine
Florian Margaine

Reputation: 60787

Alright, let's see together step by step what this means:

$tbody.find('> tr:not(.t-grouping-row,.t-detail-row)')

$tbody is a variable. It was probably defined a little before that. I guess by its name that it means "the tbody tag of a table".

> means "all the children".

tr:not(.t-grouping-row,.t-detail-row)' means "all the tr that DON'T have the classes "t-grouping-row" and "t-detail-row".

So your selector is "find all the TR in this tbody that don't have the classes "t-grouping-row" and "t-detail-row".

A better selector would be the following:

$('tr:not(.t-grouping-row, .t-detail-row)', $tbody)

But this would be just a little better, and still bad. You should review your HTML, see what you want and use a simpler selector such as $('.class', $tbody).

Upvotes: 5

Related Questions