哪个jQuery选择器可以更好地优化多个元素

Posted 2021-04-13

我有一个动态构造的表，它是根据AJAX调用返回的数据构建的。在构建表的函数结束时，我需要将jQuery UI包装器应用于表中的一些锚元素，由“map-marker”和“th-list”图标标识。哪两个选项更好地优化？

$("#tblResults tbody tr td").find("a[data-icon='map-marker'], a[data-icon='th-list']").button();

要么

$("#tblResults tbody tr td a[data-icon='map-marker'], #tblResults tbody tr td a[data-icon='th-list']").button()

这个特定的例子不会以低效率的方式来做它，但我在我的代码中有其他地方我将回调函数应用于更大的表，并且它可能会有所不同。

答案

有关参考，请参阅此处：https://stackoverflow.com/a/16423239/125981现在，这不是您问题的完全重复，但有助于解释您的问题作为补充。

第二个并不是更好，因为它将完成所有这些（我描述）两次，所以不是没有那个。现在如何真正改善第一个......

既然你提到了“multiple”，那么我们首先得到你的表的引用，然后在变量中缓存它以避免多次DOM命中就是这样做。

let myResultsThing = $('#tblResults');

现在我们有ID引用的元素（这是最快的选择器）

为什么？我们来谈谈这个。这里使用的Sizzle引擎使用右到左选择器，所以这个$("#tblResults tbody tr td")说的是1.找到所有td，2。过滤那些td为tr内的那些，3。过滤那些tbody里面的那些4.过滤器属于id #tblResults表示的元素内的那些

现在，如果你有10张表，其中100张td，每张10行，每张3张tbody，你可以看到这是一项非常繁忙的工作。因此，通过首先隔离ID，我们将很快消除90％以上的努力。

好的，我们上面有表格参考方式。使用它我们可以找到tbody（或所有tbody更精确可能有多个），从而消除页眉和页脚中的任何td。

let myTbodies = myResultsThing.find('tbody')
//get into the rest of it
.find('tr td').find("a[data-icon='map-marker'], a[data-icon='th-list']").button();

现在，我可能倾向于实际测试上述所有内容

myResultsThing.find("a[data-icon='map-marker'], a[data-icon='th-list']").button();

根据您的DOM的确切情况，您可以缓存（如我所做的那样）清除TD或A元素选择器，但我会将其留给您作为练习，因为我们没有标记来推测这里。