Question

我经常需要在没有与之关联的类或ID的li标签上设置jQuery事件，如下例所示：

    <div id="menu">
      <ul id="nav">
        <li>Nav Item 1</li>
        <li>Nav Item 2</li>
        <li>Nav Item 3</li>
        <li>Nav Item 4</li>
        <li>Nav Item 5</li>
      </ul>
    </div>

我的理解是jQuery选择从右到左读取所以如果我使用$('#nav > li) jquery选择器，则必须搜索所有li标签，然后评估li标签是否具有父级导航的ID。

假设此页面有30个li标签，但我只想在示例中选择5，那么使用$('#nav').children('li')会更有效吗？我的逻辑是，它会很快找到#nav ID，然后在其中只有5个元素进行搜索。

我还有一个问题是，如果#nav有超过30个子元素，那么使用子选择器$('#nav > li')会更有效吗？

提前致谢

Answer 1

在尝试创建自定义选择器之后，我惊讶地发现选择器的确从从右到左进行了评估。

这意味着$('#nav > li')会首先找到页面中的所有LI，然后对其进行过滤以保留其直接父级中的id="nav"。

$('#nav').children('li')由于上述原因以及您的假设（这是正确的）会更快。

硬币的另一面是“你关心吗？”。例如，如果您只对鼠标事件感兴趣，那么速度是由人为交互驱动的（最多每秒几次），而选择器方法的速度差异只有在你能做到50,000次时才会显着每秒。基本上你通常不会关心，但是你可以在效率方面犯错误：）

如果您刚刚在此之后添加鼠标事件，比如click，使用附加到祖先元素的单个委托事件处理程序将非常有效：

e.g。

$("#nav").on('click', 'li', function() { 
    // DO SOMETHING HERE - "this" IS THE LI CLICKED 
});

这很有效，因为它的工作原理如下：

监听点击事件，将DOM冒泡到我们收听的单个id="nav"元素。
然后将jQuery选择器应用于bubble bubble中的元素。
然后将函数应用于导致事件的匹配元素。

这种技术也意味着它可以用于动态添加的对象，因为它们只需要在事件时间（而不是事件注册时间）匹配选择器。

备注：

如果目标没有方便的祖先，请使用document作为冒泡事件的默认值。

不要将'body'用于委派的事件处理程序，因为样式可以阻止body接收冒泡的鼠标事件（如果它的计算高度为零）。使用document作为后备。

jQuery：使用children（）比使用子选择器更有效

1 个答案: