Question

我在一个项目中有一段JavaScript代码，它在一个仪表板上缓存了一组jQuery对象（锚标签）：

$.extend(cache, {
    dashboard : {
        buttons : [
            $('#dash-new-lead'),               $('#dash-jobs-calendar'),
            $('#dash-view-lead'),              $('#dash-sales-reports'),
            $('#dash-search-leads'),           $('#dash-new-job'),
            $('#dash-dispatch-jobs'),          $('#dash-dispatch-reports'),
            $('#dash-manage-employees'),       $('#dash-manage-trucks'),
            $('#dash-finalize-jobs'),          $('#dash-payment-profiles'),
            $('#dash-employee-statements'),    $('#dash-company-statements'),
            $('#dash-finance-reports'),        $('#dash-admin-sources'),
            $('#dash-admin-statuses'),         $('#dash-admin-companies'),
            $('#dash-admin-groups'),           $('#dash-admin-users'),
            $('#dash-admin-dispositions'),     $('#dash-search-jobs'),
            $('#dash-jobs-calendar-dispatch'), $('#dash-new-lead-dispatch'),
            $('#dash-finance-notices')
        ]
    }
});

稍后将每个链接设置为样式（使用$.each）作为按钮。每个链接都获得一个唯一的jQuery UI图标（因此id而不仅仅是类选择器）。根据用户的访问级别，DOM中可能存在或不存在某些链接。

我现在想知道使用jQuery Contains Prefix Selector是否更有效：

$.extend(cache, {
    dashboard : {
        buttons : $('a[id|="dash-"]')
    }
});

Pro：对jQuery Object的引用更少=更快
Con：jQuery无法使用document.getElementByID = slow

Answer 1

您可以创建一个包含所有身份的选择器：

$.extend(cache, {
  dashboard : {
    buttons : $('#dash-new-lead,#dash-jobs-calendar,#dash-view-lead,#dash-sales-reports,#dash-search-leads,#dash-new-job,#dash-dispatch-jobs,#dash-dispatch-reports,#dash-manage-employees,#dash-manage-trucks,#dash-finalize-jobs,#dash-payment-profiles,#dash-employee-statements,#dash-company-statements,#dash-finance-reports,#dash-admin-sources,#dash-admin-statuses,#dash-admin-companies,#dash-admin-groups,#dash-admin-users,#dash-admin-dispositions,#dash-search-jobs,#dash-jobs-calendar-dispatch,#dash-new-lead-dispatch,#dash-finance-notices')
  }
});

但是我会考虑在按钮上添加一个类，以便使用简单的选择器轻松定位它们。这样可以更容易地维护代码。

Answer 2

它非常依赖于浏览器，因此您需要进行测试才能确定。

因为'a[id|="dash"]' （通知我删除了-）似乎是有效的querySelectorAll()选择器，所以支持该方法的任何浏览器（包括IE8）应该有很好的表现。

由于您要加入tagName，不支持querySelectorAll()的浏览器（我相信）会使用getElementsByTagName()，因此过滤器只会应用于{{1}它找到的元素。

如果您能够将查询限制在比<a>更窄的上下文中，它也会有所帮助。

另请注意according to this test，document的性能在IE6和IE7中并不十分令人兴奋。 IE8确实支持getElementById()，但确保它与特定选择器一起成功并不坏。如果没有，查询将默认为Sizzle的引擎。

Here's a test直接通过querySelectorAll()使用该选择器。您可以在不同的浏览器中运行它以查看它的支持位置。

另请注意，在IE9之前不支持querySelectorAll()，所以我怀疑使用类会比getElementsByClassName()提供更好的性能提升。 Firefox3是个例外，它支持'a[id|="dash"]'，而不支持getElementsByClassName()。

Answer 3

除了每个元素都有唯一ID（dash-new-jobs等）之外，还要给它一个类（class='dash-button'）。

然后，您可以使用例如

有效地引用整个集合

$.extend(cache, {
    dashboard : {
        buttons : $('.dash-button')
    }
});

如果你需要像你提到的那样给他们所有不同的图标，请使用他们唯一的ID：

$('.dash-button').each(function() {
    // do something based on $(this).attr('id'),
    // which will be dash-new-job/dash-whatever
});

高效（尽管正如其他人所说，如果你不确定会做性能测试！），以及干净/易于理解的代码（比使用'contains'选择器更清洁！）。

Answer 4

我建议你使用包含前缀方法，因为它更容易维护。你以这种方式设置它，你不再需要担心选择哪个ID，你只需要定位那里的组，你就完成了。

虽然id方法可能具有更好的性能，但是您为每个方法创建了一个jQuery对象。这也会产生影响。

jQuery：什么更有效？许多ID特定选择器，或一个“包含前缀选择器”

4 个答案: