1

jQuery フィルターや独自の再帰降下関数など、いくつかのオプションを試してみましたが、これまでの結果には満足していません。

掘り下げて、コードをどれだけ効率的に作成できるかを確認します。しかし、他の誰かがこれを行い、良い仕事をしたに違いありません。

では、dom ツリーを検索する最も効率的な方法は何ですか? たとえば、( /.*google.*/)に一致する src プロパティを持つすべての要素を見つけたいとします。

4

3 に答える 3

4

このようなもの。

$("[src*='/google/']", "#rootnode")

また

$("#rootnode [src*='/google/']")

このテストケースを参照してください（統計によると、最初のセレクターは2番目のセレクターの14倍高速で、まったく同じセレクターです）
http://jsperf.com/test-selectorfidd123

理由を知りたいですか？jQuery は、2 番目のセレクターを使用する場合、検出できる要素ごとに各要素をループ処理する必要があります。最初のものを使用すると、jQuery はroot、ヒアルキーの最上位ノードを使用するノードを探します。そして、それが必要ではない他のすべてのDIVScus をループしません。

数か月前、私はさらにいくつかのテストを行いました。CSS 内で実行できるセレクターを使用する場合。jQuery はquerySelectorネイティブ ライブラリから使用できます。:selectedただし、またはのような特別なセレクターを使用する場合:nth-child、jQuery は Javascript を使用してこれらの要素をループする必要があります。その場合、次のようにする方がよいでしょう: (ここで、jQuery はquerySelector最初の部分に使用し、JS は.find

$("#native").find(":selected"); is faster than $("#native :selected");


情報:
属性にセレクター
セレクター APIが含まれています

于 2012-10-11T20:05:15.640 に答える
1

現在、90% 以上のブラウザーがネイティブ コードをサポートdocument.querySelectorAll(..)していると思います。document.querySelector(..)以下を使用できるはずです。

document.querySelectorAll('[src*="/google/"]');

これは、JavaScript コードから単独で作成されたものよりも高速です。jQuery も利用できる場合は、これを使用する必要があります。

于 2012-10-11T20:07:41.207 に答える
0

効率的とは何を意味するかによって異なります。読みやすいように「エレガント」を意味する場合は、Nielsが正しい. 速度の点で効率的であるという意味であれば、jQuery の使い方が間違っています。

はい、言及されている他の方法も機能しますが、おそらくより良い方法です。ページに要素が 12 個しかなくても、それで問題ないかもしれません。しかし、100 人、または 1,000 人になったらどうしますか? これらすべての要素を検索するには、非常にコストがかかります。

尋ねるべき質問は次のとおりです。

これらの要素はどのように作成されていますか? 後で作成するときに必要になるものにマークを付けるにはどうすればよいですか。

于 2012-10-11T20:18:46.030 に答える