哪个 jQuery 多个元素的选择器优化得更好

Question

我有一个动态构建的 table，它是根据 AJAX 调用返回的数据构建的。在构建 table 的函数末尾，我需要将 jQuery UI 包装器应用到 table 中的一些锚元素，由 [=19= 的图标标识] 和 "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()

这个特殊的例子不会因为效率较低的方式而受到影响，但我在我的代码中的其他地方我将回调函数应用于更大的 tables，它可能会那里有区别。

Answer 1

参考请看这里：现在这不是您问题的完全重复，但将有助于解释您的问题作为补充。

第二个不是更好，因为它会做所有这些（我描述）两次所以不是那个。现在如何真正改进第一个...

既然你提到了 "multiple" 让我们首先获取对你的 table 的引用，然后将其缓存在一个变量中以避免多次 DOM 命中。

let myResultsThing = $('#tblResults');

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

为什么？我们来谈谈吧。此处使用的 Sizzle 引擎使用从右到左的选择器，因此 $("#tblResults tbody tr td") 表示的是 1. 查找所有 td，2. 为 td 中的那些过滤 td 16=], 3. 过滤那些在 tbody 内的那些 4. 过滤那些落在由 id #tblResults

表示的元素内的那些

现在，如果您有 10 个 table，每行 100 个 td，每行 10 行，每行 3 tbody，您会发现这是一项非常繁忙的工作。因此，通过首先隔离 ID，我们可以很快消除 90% 以上的工作。

好的，上面有我们的 table 参考方法。使用它我们可以找到 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 到底是什么样子，您可能会缓存（就像我对 table 所做的那样）清除到 TD 或 A 元素选择器，但我会把它留给您练习，因为我们没有标记可以在这里推测。

哪个 jQuery 多个元素的选择器优化得更好

Which jQuery selector for multiple elements is better optimized

jquery

optimization

jquery-selectors