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からわずか1歩離れて内部的にそれを作っています

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

このjsPerfテストケースを表示して、速度の違いを確認してください

@Dominicがコメントで述べたように、彼のjQuery Anti-Patterns for Performance＆Compressionプレゼンテーションで、PaulIrishは次のように述べています。

セレクターの最適化

もちろん、＃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(...);

ここで、最初に親要素で何かを実行し、1つ以上の子で他の何かを実行する必要があります。

于 2012-04-04T13:20:22.380 に答える
2

基本的に違いはありません。ただしfind()、スコープ変数とで使用する場合に便利ですthis。

例えば：

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

これは、 「helloworld」pという名前のクラスを持つものにすべてを設定します。action

于 2012-04-04T13:21:19.850 に答える
2

それらは両方とも同等です。2つのクエリを実行しているため、最初のクエリは少し遅くなります。速度の違いはおそらく目立たないでしょう。

コンストラクターでコンテナーを取得するプラグイン/コンポーネントを作成する場合に使用できfindます。これを検索のルートとして使用するよりもfind、コンテナーの外部に要素が取得されないようにする必要があります。

于 2012-04-04T13:22:01.753 に答える