Javascript 处理大型集合时优化jQuery选择器/addBack（）

我使用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分析器：大约60000个元素集合的执行时间。包含的时间在第三列中

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

注意：我为什么要这样做：我使用的是DevXpress TreeList组件，它有自己的样式。没有简单的方法可以在服务器端“取消样式设置”，因此我选择了客户端，如上所示。最后，我将选择树列表、所有子元素，并从中删除相关的css类

更新/解决方案1 我已经成功地实施了Frédéric Hamidi提出的解决方案，并取得了相当大的进步：

IE javascript profiler：使用Frederic的建议，大约60000个元素的集合的执行时间。包含的时间在第三列中

addBack（）操作所需的时间刚刚过去，剩下的只是其他东西。这意味着总体上提高了4倍以上。耶

更新/解决方案2 我还实施了A.Wolff提出的解决方案，并获得了轻微的额外改进：

IE javascript分析器：使用a.Wolff的建议，大约60000个元素的集合的执行时间。包含的时间在第三列中

find（）操作所需的时间已经过去，只剩下其他内容。这意味着在我的机器上有大约10毫秒的轻微改进。酷

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

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

执行排序以将匹配的元素按文档顺序排列。简单的选择，做完全相同的事情，所以它不会解决你的问题

但是，该文档足以提供解决方案：

以定义良好的顺序创建包含元素的jQuery对象，并 在没有排序开销的情况下，使用

$（DOM元素的数组）

签名

因此，为了避免这种开销，您可以编写：

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

但最终在引擎盖下构建了两个阵列，因此会影响性能。最终结果可能比当前方法更快，这取决于匹配的元素数量。

这里有一个想法：

函数解密（jq，类）{
var remove=classes.join（“”）；
jq.find（'.'+classes.join（'，'）.removeClass（remove）；
jq.removeClass（remove）；
}
解密（$（'.keepme'），['remove'，'remove2'，'remove3']）
.remove、.remove2、.remove3{
颜色：红色；
}
.keepme，.keepme2{
字体大小：粗体；
}

x
选择ID为
TreeStelemente的元素及其所有子元素的相关选择器为：

"#TreeListElemente, #TreeListElemente *"

现在，您可以筛选出具有类的子体：

"#TreeListElemente, #TreeListElemente [class]"

因此，它将给出：

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

$（“#treestelemente，#treestelemente[class]”。removeClass（“…”）？？？顺便说一句，不可能只删除/更新相关的样式表吗？@A.Wolff，不，很遗憾没有，请参阅我在问题中的说明。编辑后，您是否测试了它：
$（“#treestelemente，#treestelemente[class]”）。removeClass(“dxtl dxtl__B2DXTL__B0DXTLSelectionCell dxtlHeader dxtl__B3DXTLControl dx wrap dxtl__IMDXEHyperLink”）
？我想会更performant@A.Wolff我现在也对它进行了测试。它稍微快了一点，省略了显式查找操作所花费的时间，但总体上没有快多少。但是，代码更可读。请作为答案发布，并简要说明它比原始解决方案或Frederic和我会做的更好接受它作为答案。非常好。这带来了巨大的改进，请参阅问题中的更新1。谢谢！我目前使用此解决方案，请参阅问题中的更新2。在我的情况下，它比@Frédéric Hamidi的解决方案略快，并且更易于阅读。