Question

我有一些像这样的HTML：

<div id="MyDiv">

  <div class="Class1">
    <div class="SClass1"></div>
  </div>
  <div class="Class2"></div>

</div>

之间有什么区别吗？

$('#MyDiv').find('.SClass1').show();

和

$('#MyDiv .SClass1').show();

Answer 1

http://api.jquery.com/jquery/#selector-context声明：

在内部，选择器上下文是使用.find（）方法实现的，所以$（'span'，this）相当于$（this）.find（'span'）。

这意味着

$('#MyDiv .SClass1').show();

离jQuery内部只有一步之遥

$('#MyDiv').find('.SClass1').show();

View this jsPerf test case to see the differences in speed

正如@Dominic在评论中提到的那样，保罗·爱尔兰在jQuery Anti-Patterns for Performance & Compression presentation中表示：

选择器优化

当然，从#id下降是最好的

// #id-based selector 
var arms = $('#container div.robotarm');

// hyper-optimized #id case first, then find: 
var arms = $('#container').find('div.robotarm');

Answer 2

在你的情况下，使用find()是非常无意义的（除了可读性 - 但任何人都会对此有另一种意见）。我只在真正需要的情况下使用find()，例如：

$('#MyDiv').show().find('.SClass1').css(...);

必须首先使用父元素和其中一个或多个子元素进行其他操作。

Answer 3

基本上没有区别。但是，find()如果将其与范围变量和this一起使用，则非常有用。

例如：

$(document).ready( function() {
    $('.action').click( function() {
        $(this).find('p').text("hello world");
    });
});

将所有具有p类的内容action设置为“hello world”。

Answer 4

它们都是等价的。第一个会慢一点，因为你正在做两个查询。速度的差异可能并不明显。

您可以在创建插件/组件的情况下使用find，该插件/组件在构造函数中获取容器，而不是将其用作find搜索的根目录以确保你没有得到容器外的任何元素。

是jquery .find总是有用吗？

4 个答案: