5

我有一些这样的 HTML：

<div id="MyDiv">

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

</div>

有没有区别

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

和

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

4 回答 4

3

http://api.jquery.com/jquery/#selector-context指出：

在内部，选择器上下文是用 .find() 方法实现的，所以 $('span', this) 等价于 $(this).find('span')。

意思是

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

距离 jQuery 仅一步之遥

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

查看这个 jsPerf 测试用例，看看速度上的差异

正如@Dominic 在评论中提到的，在他的jQuery Anti-Patterns for Performance & Compression 演示文稿中，Paul Irish 指出：

选择器优化

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

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

// hyper-optimized #id case first, then find: 
var arms = $('#container').find('div.robotarm');
于 2012-04-04T13:25:02.250 回答
2

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

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

首先必须对父元素进行某些操作，然后对其一个或多个子元素进行其他操作。

于 2012-04-04T13:20:22.380 回答
2

本质上没有区别。但find()如果您将它与作用域变量和this.

例如：

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

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

于 2012-04-04T13:21:19.850 回答
2

它们都是等价的。第一个会稍微慢一些，因为您正在执行两个查询。速度上的差异可能并不明显。

您可以find在创建插件/组件时使用，该插件/组件在构造函数中获取它的容器，然后将其用作搜索的根，find以确保您没有在容器之外获取任何元素。

于 2012-04-04T13:22:01.753 回答