1

我有一个很大的产品列表，它是动态的并且随着 ajax 的变化而变化。该表中有大约 100 行。

我已经看到$('.className', '#parentElement');选择元素的上下文方法比通常的方法$('.className');或$('#parentElement .className');. （如果错了请纠正我）

在某些情况下，我需要使用 jQuery 选择特定元素，每个新行都会动态添加唯一id="product-name-123456"元素class="mainproductOffer"。

那么，这两种方法的执行速度更快呢？

  1. $('tr[id^=product-name-]').click(function(){...});

  2. $('tr.mainproductOffer').click(function(){...});

或者

有没有其他方法可以更快地做同样的事情？

4

4 回答 4

3

在这种情况下使用类选择器，它比属性选择器更快。您应该使用事件委托 - 例如：

$('table').on('click','.mainproductOffer',function() {});

减少事件处理程序的数量。如果类 (mainproductOffer) 仅用于 TR 标签，也请从选择器中删除该标签。

于 2012-12-27T10:19:31.393 回答
1

那么，这两种方法的执行速度更快呢？

$('tr.mainproductOffer').click(function(){...});

有没有其他方法可以更快地做同样的事情？

无与伦比的文章 ' jQuery Anti-Patterns for Performance ' 会帮助你

于 2012-12-27T09:57:54.140 回答
0
  1. 使用 on() （事件委托），因为它是动态添加的。

  2. 类选择器比属性选择器快

    $('tr').on( 'click', '.mainproductOffer', function(){...});

于 2012-12-27T09:55:48.250 回答
0 
$('tr.mainproductOffer').click(function(){.....; OR
$('table').on( 'click', 'tr.mainproductOffer', function(){...;

因为更快

根据jquery文档

当 jQuery 用于过滤委托事件时，可以非常快速地处理 tag#id.class 形式的简单选择器。因此，“#myForm”、“a.external”和“button”都是快速选择器。使用更复杂选择器（尤其是分层选择器）的委托事件可能会慢几倍——尽管对于大多数应用程序来说它们仍然足够快。通常可以通过简单地将处理程序附加到文档中更合适的点来避免分层选择器。例如，代替$("body").on("click", "#commentForm .addNew", addComment)使用$("#commentForm").on("click", ".addNew", addComment)。

于 2012-12-27T10:04:41.537 回答