Question

我有一个动态构造的表，该表是根据AJAX调用返回的数据构建的。在构建表的功能的最后，我需要将jQuery UI包装器应用于表中的某些锚元素，这些锚元素由“地图标记”和“第一个列表”的图标标识。这两个选项中哪个哪个更优化？

$("#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()

这个特定的示例不会因为效率低下而受苦，但是我在代码中还有其他地方将回调函数应用于更大的表，这可能会有所作为。

Answer 1

有关参考，请参见此处：https://stackoverflow.com/a/16423239/125981 现在，这并非您所提问题的确切重复，但将有助于您补充问题。

第二个不是更好，因为它将（我描述）执行所有这一切两次，所以不是一个。现在如何真正改善第一个...

由于您提到了“多个”，所以我们首先获取对表的引用，然后将其缓存在变量中，以避免仅这样做就导致多个DOM命中。

let myResultsThing = $('#tblResults');

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

为什么？让我们来谈谈。这里使用的Sizzle引擎使用了从右到左的选择器，因此$("#tblResults tbody tr td")所说的是1.找到所有td，2.过滤掉td中的{{ 1}}，3.过滤tr内部的那些对象。4.过滤ID tbody

所指元素内的那些对象。

现在，如果您有10个表，每个表中有10行，每行10行，每行3个#tblResults，则可以看到这是一项非常繁忙的工作。因此，通过首先隔离ID，我们将在这里迅速消除90％以上的工作。

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

tbody

现在在这里，我可能倾向于针对

实际测试以上所有内容

td

取决于您的DOM到底是什么样子，您可能会缓存（就像我在表中所做的一样）清除到TD或A元素选择器，但由于我们没有标记可推测，因此我将其留给您作为练习。