5

最初の要素を取得する必要があります。

私はこのコードでそれを行います...

$(element).find('.x').first();

私が理解している限り、そのコードは...

  1. element一致したすべての要素を取得します.x。
  2. 不要な要素を削除します。

それを行うためのより良い方法はありますか？好き$.findOne()か何か？

4

10 に答える 10

11

jQueryドキュメントに従って：

:first は jQuery の拡張機能であり、CSS 仕様の一部ではないため、:first を使用するクエリは、ネイティブ DOM の querySelectorAll() メソッドによって提供されるパフォーマンスの向上を利用できません。:first を使用して要素を選択するときに最高のパフォーマンスを実現するには、最初に純粋な CSS セレクターを使用して要素を選択し、次に .filter(":first") を使用します。

したがって、セレクターを次のように書き換えます。

$(element).find('.x').filter(":first")

または（これは直接の子孫のみを.find提供し、ネストされた要素も探していない限り、より高速になります）

$(element).children('.x').filter(":first")

より良い結果が得られるはずです。

更新kingjivとpatrick dwからの貴重な情報 (コメントを参照) の後.filter(':first')、ドキュメントの主張に反して、これら 2 つはより高速であるように思われます。

$(element).find('.x').first();   // faster

$($(element).find('.x')[0]);     // fastest
于 2011-08-24T16:48:12.510 に答える
4

本当に高速にしたい場合は、ネイティブ ブラウザのメソッドを使用する必要があります。最新のブラウザーのサポートquerySelector [ドキュメント] :

var $result;
if(element.querySelector) {
    $result = $(element.querySelector('.x'));
}
else {
    $result = $(element).find('.x').first();
}

elementが単一の要素であり、セレクターが有効な CSS セレクターである場合にのみ機能するため、使用法は少し制限されています。そこからプラグインを作ることができます。しかし、複数の要素など、すべてのケースを考慮すると、おそらく利点はなくなります。

繰り返しになりますが、非常に具体的なユースケースがある場合はこれが役立つかもしれませんが、そうでない場合は jQuery を使用してください。

更新:結局のところ、プラグインの作成はさらに高速です: jsPerf ベンチマーク

(function($) {
    $.fn.findOne = function(selector) {
        try {
            var element, i = 0, l = this.length;
            while(i < l && (element = this[i].querySelector(selector)) === null) {
                i++;
            }
            return $(element);
        }
        catch(e) {
            return this.find(selector).first();
        }
    };
}(jQuery));

仕組み:

プラグインは、選択した DOM 要素を繰り返し処理し、querySelectorそれぞれを呼び出します。要素が見つかると、ループが終了し、見つかった要素が返されます。例外が発生する理由は 2 つあります。

  • ブラウザはサポートしていませんquerySelector
  • セレクターは純粋な CSS セレクターではありません

どちらの場合も、プラグインは通常の jQuery メソッドを使用するようにフォールバックします。

于 2011-08-24T17:08:32.650 に答える
2

クレイジーなようですが、私が見たすべてのパフォーマンス テストで、.first()は よりも優れたパフォーマンスを示してい:firstます。

ほとんどの人が示唆しているように、 を使用$(element).find(".x:first")するとパフォーマンスが向上するはずです。ただし、実際.firstにはもっと高速です。理由を理解するためにjqueryの内部を調べていません。

http://jsperf.com/jquery-select-first

そして、どうやら[0]jqueryオブジェクトを使用してから再ラップするのが最速です：

$($(element).find(".x")[0])

編集:理由の説明については、mrchief の回答を参照してください。どうやら彼らはそれをドキュメントに追加したようです。

于 2011-08-24T16:54:40.257 に答える
0

jQueryのドキュメントによると、その方法は問題ないか、少なくとも:firstセレクターを使用するよりも優れています。

代替手段として試すか、結果.filter(":first")に対して配列アクセサーを使用して最初の要素を取得できます。.find()[0]

また、代わりに次の.find()ように変更できます。

$('.x', element)

.xドキュメント全体を検索するのではなく、要素内の要素に検索を絞り込みます。

于 2011-08-24T16:53:45.957 に答える
0

これはもっと良いはずです

$(element).find('.x:first');
于 2011-08-24T16:47:07.397 に答える
0

:firstセレクターを使用:

$(element).find('.x:first')
于 2011-08-24T16:47:19.623 に答える
0

次のように書く方が良いです:

$('a:first');

あなたが書いているのは、「「要素」で、「.x」を見つけて最初のものを返す」ということです。そして、それはこのように表現できます

$('.x:first', element);
于 2011-08-24T16:47:42.773 に答える
0

初子疑似クラスを使ってみてはどうですか？お気に入り

$(element).find('.x:first-child')

ただし、構造が次のような場合、問題が発生する可能性があります

<div>
   <p></p>
</div>
<div>
   <p></p>
</div>

したがって、実際にはあなたが探しているものではありません（一般的な解決策を意味する場合）。その他の方法：最初に、これが正しいアプローチのようです

于 2011-08-24T16:47:46.663 に答える
0

あなたのボトルネックは.find()、直接の子だけでなく、すべての子孫を検索する です。

その上、.x(ネイティブ DOM メソッドを使用する) ID またはタグ名ではなく、(jQuery カスタム検索を使用する) クラスを検索しています。

Mrchief の回答を使用し、可能であれば、これら 2 つのボトルネックを修正してセレクターを高速化します。

于 2011-08-24T16:51:39.700 に答える
0

子孫セレクターを使用して$(element)との呼び出しを組み合わせることができます。.find()パフォーマンスの比較がわかりません：

$("#element .x").first().hide();
于 2011-08-24T16:55:21.320 に答える