jQuery速度:哪一个更快,{ul#parent li}或{li.child}？

Question

只是好奇是否有一个既定的"最佳方法"来定位父元素内的子元素.

例如,如果我想在父元素的子元素上创建一个click事件,应该首选哪一个？

a)给出父元素和id并执行:

$('ul#parent li').click(function() {});

b)或者,给每个孩子一个班级名称并直接定位他们:

$('li.child').click(function() {});

我问,因为我试图挤出一些我可以在一个有点大的应用程序中获得的性能.逻辑将要求定位id比定位类名更快,但父>子结构是否否定了这种优势并证明了通过classname进行定位的合理性？

感谢您的任何见解.

Answer 1

这将是最快的选择:

$('ul#parent li').click(function() {});

如果可能,始终从ID选择器下降.

但是,如果你有很多的<li>元素,这是更便宜地使用.delegate(),就像这样:

$('#parent').delegate('li', 'click', function() { });

在.delegate()您附加一个事件处理程序而不是n(多个<li>)事件处理程序时,每个处理程序一个<li>.如果启动时间正在扼杀你,那么它就可以聆听click泡沫了<ul>,这是一个更好的选择.它的启动时间,结合大量的处理程序与泡沫的成本(这是一个非常的权衡非常,非常小的成本).如果你有很多元素,这几乎总是一个更好的整体选择.