Question

好奇是否有一种既定的“最佳方式”来定位父元素内的子元素。

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

a）给出父元素和id并执行：

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

相反，给每个孩子一个班级名称并直接定位他们：

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

我在问，因为我试图挤出一些在某个大型应用程序中可以获得的性能。逻辑将要求定位id比定位类名更快，但是父＆gt;儿童结构否定了这种优势并证明了通过类名来定位？

感谢您的任何见解。

Answer 1

这将是最快的选择：

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

如果可能，始终从ID选择器下载。

但是，如果你有批次的<li>元素，那么使用.delegate()会更便宜，就像这样：

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

使用.delegate()，您附加一个事件处理程序而不是n（<li>个）事件处理程序，每个<li>一个。如果click冒泡到<ul>，如果启动时间杀了你，这是一个更好的选择。这是启动时间绑定大量处理程序与泡沫成本（这是非常非常，非常小成本）的权衡。如果你有很多元素，这几乎总是一个更好的整体选项。

Answer 2

具有id的选择器更快，因为每个元素每页的id应该是一次，而不是可以分配给具有相同类名的多个元素的类。

Answer 3

从ID中选择更快。如果您经常根据该ID进行选择，那么将它保存到变量（例如$ul_parent）会更快，然后根据该变量进行进一步选择，例如

$ul_parent.children('li');

或

$('>li', $ul_parent); //same as above

这使您可以使用快速选择器，并为以后的选择减少一些开销。第二个表单不经常使用，但第二个参数在第一个参数中充当选择器的上下文，因此jQuery函数不必搜索整个页面。它只搜索已经创建的jQ包装器对象。

Answer 4

虽然理论上$('ul#parent li')比$('li.child')快，但实际上没有太大差异。

在微基准测试（http://jsbin.com/uwela/4）中，有1 <ul id="parent">有4096 <li class="child">个，有64 <ul>每个有<li>个。在我的计算机上的Firefox 3.6上，所有$('ul#parent li')，$('#parent li')，$('li.child')，$('.child')大约需要210毫秒来附加onclick功能。

但是，此测试页面上的DOM非常浅。请在您自己的页面上进行测试以确定。

jQuery速度：哪一个更快，{ul＃parent li}或{li.child}？

4 个答案: