javascript - jQuery 选择器速度执行

Question

我有一个很大的产品列表，它是动态的并且随着 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(){...});

或

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

Answer 1

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

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

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