1

私は次の設定をしています：

 var el = $("#overParent");
 // Do whatever with el here.
 var cls = $(".valueElement", "#parent"); // Get elements with class valueElement inside element with id parent
 // Do whatever

これは機能していますが、これをもっと速くできるかどうか疑問に思いました。私はそれがすでに選択されている#parent内部の要素であることを知っています。#overParentどういうわけかこれを使用してelのみをスキャンし、指定されたクラスの要素を取得できますか#overparent？#parent

のようなもの：$(".valueElement", "#parent", el)しかし、ドキュメントによると、$2つのパラメータのみを取ります。

4

5 に答える 5

2

ID で要素を検索する場合は、次のようにします。

var $element = $('#id');

検索するためのコンテキストを提供しないことが常に最速の方法です。

同様に、検索のコンテキストとして ID を提供している場合"#parent"は、最速のセレクターです。理論的には を使用"#overParent > #parent"して目的を達成できますが、実際にはより多くの作業を行う必要があり、遅くなります。

于 2013-01-23T08:49:22.583 に答える
1

@ブレンダー

クラスを使用してコンテキスト要素をキャッシュする場合は、コンテキストを提供する方が高速です。

http://jsperf.com/id-test-123/3

于 2013-02-07T14:57:22.777 に答える
1

のようなセレクター'#theId'は、jQuery が使用するため、ドキュメントをスキャンしませんdocument.getElementById。

ID を知っている要素を探したい場合は、その親がわかっている場合でも、常に を使用します$('#theid')。

実際、親をコンテキストとして提供すると、jQuery は呼び出され、その後、見つかった要素が親に含まれていることを確認しますdocument.getElementById 。したがって、これははるかに遅くなります。

ソースコードから：

    // Speed-up: Sizzle("#ID")
    if ( (m = match[1]) ) {
        if ( nodeType === 9 ) {
            elem = context.getElementById( m );
            // Check parentNode to catch when Blackberry 4.6 returns
            // nodes that are no longer in the document #6963
            if ( elem && elem.parentNode ) {
                // Handle the case where IE, Opera, and Webkit return items
                // by name instead of ID
                if ( elem.id === m ) {
                    results.push( elem );
                    return results;
                }
            } else {
                return results;
            }
        } else {
            // Context is not a document
            if ( context.ownerDocument && (elem = context.ownerDocument.getElementById( m )) &&
                contains( context, elem ) && elem.id === m ) {
                results.push( elem );
                return results;
            }
        }

同様に、クラスを持つすべての要素を選択する場合は、親を指定しないでください。これは役に立ちません。

あなたの場合、親を使用してセットを制限したいように見えるので、単に使用します

$(".valueElement", "#parent");
于 2013-01-23T08:49:26.353 に答える
1

通常の id セレクターに固執するだけです。

$('#element');

親要素が既に選択されている場合でも、これは依然として最速です: http://jsperf.com/id-test-123

ここでは推測ですが、ブラウザはルックアップ テーブルを使用して id 属性で要素を検索していると思います。

于 2013-01-23T08:53:18.470 に答える
1

ドキュメントによると...

var el = $("#overParent");

これは、別のセレクターが接続されている場合に非常に効率的です....

ID セレクターの場合、jQuery は非常に効率的な JavaScript 関数 document.getElementById() を使用します。h2#pageTitle などの別のセレクターが id セレクターにアタッチされている場合、jQuery は要素を一致として識別する前に追加のチェックを実行します。

于 2013-01-23T08:55:55.867 に答える