Question

我有桌子

<table>
  <tr>
    <td>
      <div class="a"></div>
      <div class="data"></div>
    </td>
  </tr>
</table>

 $(".a").parent("td").find(".data").html('1');

vs

$(".a").parent("td").find(".data:first").html('1');

当我按下课程.a的div时 - 转到上面的第一个td，然后找到课程.data的div并将值放在那里。

我的测试是：

搜索.data并输入值

VS

搜索第一个 .data并设置值

然而，似乎如果我不先行，那就更快了。

怎么可能？

Answer 1

当你在jQuery中使用伪选择器时，你会产生必须对该字符串进行处理来解析选择器的开销。最好使用equivelent而不是伪选择器。

以下是jsperf的更新版本，以表明使用函数要快得多：http://jsperf.com/dfgdfg33355/2

另外，如果你签出上面的jsperf，你会发现在这种情况下使用.next()是最快的DOM遍历方法。

Answer 2

这是因为:first强制jQuery执行一次操作而不是没有操作。在第一个示例“a”中获取.data列表后，它只会对该列表进行操作，以将html内容设置为1。在第二个例子“sss”中，它必须做同样的事情，但也得到列表中的第一个元素。恰好在您的示例中，该列表中只有一个项目。

如果您将html编辑为多个<div class="data"></div>，则会看到不同的结果。

Answer 3

如果您的HTML结构是（并且将是），您应该使用.next（）

请参阅http://jsperf.com/dfgdfg33355/3

第一个选择器的jQuery比不使用慢？

3 个答案: