jQuery的:first在find方法中的问题

作者：Jasmine - 2016年05月07日

　jQuery中的:first相当于执行完选择器后再取第一个结果，也就是说$("*:first")和$("*").eq(0)选择到的东西是一样的。但是find这个方法的行为是遍历给定的对象来执行选择器，既然选择器会被执行多次，那就意味着它的:first就未必只有一个结果了。

　　比如下面这个文档的选择就能看出差异

<div>
  <ul>
    <li>www.web-tinker.com</li>
  </ul>
  <ul>
    <li>次碳酸钴</li>
  </ul>
</div>
<script src="jquery.js"></script>
<script>
console.log($("div ul li:first").get());
console.log($("div ul").find("li:first").get());
</script>

第一行代码只有一个选择器和一个:first，这样必然输出一个结果。第二行代码先执行一个普通的选择器来选定两个ul，之后遍历这个结果，再执行带:first的选择器。由于ul有两个，带:first的选择器就会被执行两次，因此这里就会输出两个结果。

　　这个逻辑正确吗？其实它正不正确已经无所谓了。因为在jQuery中可以找到与它矛盾的逻辑，它要是正确，另一个就是错的，它要是错的另一个才能正常。依然用刚才的HTML文档，执行下面这两行代码试试。

console.log($("div ul").children("li:first").get());
console.log($("li").filter("li:first").get());

得到的结果我就不截图了，他们都输出一个LI，也就是说children和filter方法都不存在find的情况。这些方法采用的都是遍历，为什么他们的结果和find不同呢？

　　以我的逻辑来看，是find这个方法的设计有问题。

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/408

版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！