在处理大型集合时优化jQuery selector/addBack()

Question

我使用jQuery故意从潜在的大型html表中的元素中删除css类.请参阅下面的解释为什么我这样做.

目前我这样做:

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

该表有时很大并且有许多元素.我想加快页面加载/ DOM操作.

IE的内置Javascript探查器告诉我,特别是.addBack()很慢.它似乎做了某种排序,这对我的用例完全没用.我可以摆脱它吗？除了addBack()之外,还有另一种方法可以包含所选元素本身吗？

IE javascript profiler:大约60000个元素的集合的执行时间.包容性时间在第三列

或者是否有另一种更有效的方法从大量元素中删除类,选择元素,本身和所有子元素？

注意:为什么我这样做:我使用DevXpress TreeList组件,它带有自己的样式.没有简单的方法在服务器端"unstyle it",因此我选择做客户端,就像上面演示的那样.最后,我选择TreeList,所有子元素,并从中删除相关的css类.

更新/解决方案1

我成功实施了FrédéricHamidi提出的解决方案,取得了很大的进步:

IE javascript profiler:使用Frederic提议的大约60000个元素的集合的执行时间.包容性时间在第三列

addBack()操作所需的时间刚刚消失,只剩下其他的东西了.这意味着整体提高了4倍以上.好极了!

更新/解决方案2

我还实施了A. Wolff提出的解决方案并获得了一些改进:

IE javascript profiler:使用A. Wolff提议的大约60000个元素的集合的执行时间.包容性时间在第三列

find()操作所需的时间消失了,只剩下其他的东西了.这意味着我的机器略微改进了大约10毫秒.凉!

这是我现在使用的解决方案:

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

Answer 1

用于选择具有 ID 的元素TreeListElemente及其所有后代的相关选择器将是：

"#TreeListElemente, #TreeListElemente *"

现在你可以过滤掉有类的后代：

"#TreeListElemente, #TreeListElemente [class]"

所以它会给出：

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