7

最新のブラウザーでは、jQueryはdocument.querySelectorAll()、有効なCSSセレクターが使用されている場合にパフォーマンスを向上させるために使用します。document.querySelectorAll()ブラウザがセレクタまたはメソッドをサポートしていない場合は、Sizzleにフォールバックします。

ただし、カスタムセレクターをデバッグするときは、ネイティブ実装ではなく常にSizzleを使用したいと思います。つまり、 jQueryでサポートされていないCSS3セレクターの1つで:nth-last-child()あるの実装を考え出そうとしています。このセレクターは最新のブラウザーでネイティブにサポートされているため、リンクされた質問で説明されているように機能します。ただし、カスタムセレクターのデバッグを妨げるのはまさにこの動作なので、避けたいと思います。

私が使用できる安価なハックは、非標準のjQueryセレクター拡張機能をドロップすることです。これにより、いわばセレクターが「無効化」されます。たとえば、すべてli:nth-last-child(2)が表示されていると仮定すると、これをドロップするだけで次のようになります。

$('li:nth-last-child(2)').css('color', 'red');

これに：

$('li:nth-last-child(2):visible').css('color', 'red');

これにより、常にSizzleによって評価されます。ただし、これには、自分のページ要素を想定する必要がありますが、これは正しい場合とそうでない場合があります。そして、私は本当にそれが好きではありません。言うまでもなく、どうしても必要な場合を除いて、一般的に非標準のセレクターを使用するのは嫌いです。

それをサポートするブラウザーでネイティブメソッドをスキップし、document.querySelectorAll()jQueryに代わりにSizzleを使用してセレクターを評価させる方法はありますか？非標準のセレクターの使用を使用しないことが望ましいですか？おそらく、これにはの代わりに別のメソッドを呼び出す必要があり$()ますが、セレクターハックIMOよりもはるかに優れています。

4

3 に答える 3

9

nulljQueryがロードされる前に設定して、サポートされていないと見なすことができます。

document.querySelectorAll = null;
//load jquery, will trigger not supported branch
//Optionally restore QSA here (save a reference) if needed

これは、これを次のように評価することになっていますfalse

デモ： http： //jsbin.com/asipil/2/edit

行をコメントアウトしてnull再実行すると、赤に変わります。

于 2012-07-31T20:11:56.787 に答える
3

セレクターのコードを自分で開発しているので、開発サイクルの間、単純にカスタム名を付けることはできませんか？多分それにあなた自身のベンダープレフィックスか何かを与えますか？-bolt-nth-last-child()

そうすれば、ブラウザは間違いなくそれをサポートしないことがわかるので、常にSizzleを使用することになります。

-bolt-開発サイクルが終了したら、プレフィックスを削除できます。

これは質問への回答というよりは回避策の方が多いことはわかっていますが、私にとっては最も簡単な解決策のようです。

于 2012-07-31T20:59:20.813 に答える
0

jQuery.findデフォルトはsizzleのようです。これにより、ネイティブ関数をnullに設定することで、環境を破壊する必要がなくなります。

https://github.com/jquery/jquery/blob/master/src/sizzle-jquery.js#L3

したがって、次のことができるはずであり、それは常にシズルを通過します。

$.find('li:nth-last-child(2)')
于 2012-07-31T20:14:58.363 に答える