Optimizing the jQuery / addBack () selector when working with a large collection

Question

I am using jQuery to intentionally remove css classes from elements in a potentially large html table. Below is an explanation of why I am doing this.

I am currently doing it like this:

var tableElements = $("#TreeListElemente").find("*").addBack(); tableElements.removeClass("dxtl dxtl__B2 dxtl__B0 dxtlSelectionCell dxtlHeader dxtl__B3 dxtlControl dx-wrap dxtl__IM dxeHyperlink"); 

The table is sometimes large and has many elements. I would like to speed up page manipulation / DOM.

Javascript's built-in IE profiler tells me that especially .addBack () is slow. It seems to be doing some sort of sorting, which is completely optional for my use. Can i get rid of this? Is there any other way to include the selected item itself besides addBack ()?

IE javascript profiler: runtime for a collection of approximately 60,000 items. Including times are in the third column

Or is there another, more efficient way to remove classes from a large set of elements, with the choice of the element, itself, and all child elements?

Note. Why I do this: I use the DevXpress TreeList component, which comes with its own style. There is no easy way to "untie it" on the server side, so I decided to make this client side as shown above. In the end, I select TreeList, all child elements and remove the corresponding css classes from them.

Update / Solution 1

I successfully implemented the solution proposed by Frederick Hamidi, got a pretty good improvement:

IE javascript profiler: runtime for a collection of approximately 60,000 items using Frederick's suggestion. Including times are in the third column

The time required for the addBack () operation simply disappeared, remaining only different. This means an improvement of more than 4 times overall. Hooray!

Update / Solution 2

I also implemented the solution proposed by A. Wolf and got a slight improvement:

IE javascript profiler: runtime for a collection of approximately 60,000 elements, using A. Wolf's suggestion. Including times are in the third column

The time required for the find () operation disappeared, remaining only different. This means a slight improvement on my machine of the order of 10 with milliseconds. Cool!

This is the solution I'm using now:

 $("#TreeListElemente, #TreeListElemente [class]").removeClass("dxtl dxtl__B2 dxtl__B0 dxtlSelectionCell dxtlHeader dxtl__B3 dxtlControl dx-wrap dxtl__IM dxeHyperlink"); 

Answer 1

The corresponding selector for selecting an element with the identifier TreeListElemente and all its descendants will be:

 "#TreeListElemente, #TreeListElemente *" 

Now you can filter the children having the class:

 "#TreeListElemente, #TreeListElemente [class]" 

So this would give:

 $("#TreeListElemente, #TreeListElemente [class]").removeClass("dxtl dxtl__B2 dxtl__B0 dxtlSelectionCell dxtlHeader dxtl__B3 dxtlControl dx-wrap dxtl__IM dxeHyperlink"); 

Answer 2

addBack () performs sorting to put the matched elements in the order of the document. The lightweight alternative to add () does the same, so it won’t solve your problem.

However, the documentation is useful enough to provide a solution:

To create a jQuery object with elements in a specific order and without sorting service data, use the signature $(array_of_DOM_elements) .

Therefore, to avoid this overhead, you can write:

 var ancestor = $("#TreeListElemente"), tableElements = $(ancestor.find("*").get().concat(ancestor[0])); 

get () and concat () will eventually build two arrays under the hood, however, so this will affect performance. The end result may be faster than your current approach, depending on the number of elements that you match.

Answer 3

Here is a thought:

 function deClassify(jq, classes) { var remove = classes.join(' '); jq.find('.' + classes.join(',.')).removeClass(remove); jq.removeClass(remove); } deClassify($('.keepme'), ['remove', 'remove2', 'remove3']); 

 .remove, .remove2, .remove3 { color: red; } .keepme, .keepme2 { font-weight: bold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="keepme remove remove2"> <div class="keepme2 remove remove3">x</div> </div> 

This avoids the "selection" of inconsistent elements, reducing the load, and, of course, no additional sorting is required ...