24

参考までに、 jQuery を使用したカスタム フィルター セレクターの作成に関する記事を参照してください。

序章：

jQuery のカスタム フィルター セレクターに慣れていない方のために、それらが何であるかについての簡単な入門書を次に示します。

再利用可能な が必要な場合はfilter、オブジェクトに独自の関数を追加して、jQuery のセレクター式を拡張できjQuery.expr[':']ます。

この関数は現在のコレクションの各要素に対して実行され、true または false を返す必要があります ( とよく似ていますfilter)。この関数には、次の 3 ビットの情報が渡されます。

  1. 問題の要素

  2. コレクション全体におけるこの要素のインデックス

  3. matchより複雑な式の重要な情報を含む、正規表現の一致から返される配列。

を拡張したら、組み込みのもの ( 、など)をjQuery.expr[':']使用するのと同じように、jQuery セレクターでフィルターとして使用できます。:first:last:eq()

以下は、複数のクラスが割り当てられている要素をフィルタリングする例です。

jQuery.expr[':'].hasMultipleClasses = function(elem, index, match) {
    return elem.className.split(' ').length > 1;
};

$('div:hasMultipleClasses');

これがフィドルです：http://jsfiddle.net/acTeJ/

上記の例ではmatch、関数に渡される配列を使用していません。もっと複雑な例を試してみましょう。ここでは、tabindex指定した数値よりも大きい要素に一致するフィルターを作成します。

jQuery.expr[':'].tabindexAbove = function(elem, index, match) {
    return +elem.getAttribute('tabindex') > match[3];
};

$('input:tabindexAbove(4)');

これがフィドルです：http://jsfiddle.net/YCsCm/

これが機能する理由は、match配列が、セレクターの解析に使用された正規表現から返された実際の配列であるためです。したがって、この例でmatchは、次の配列になります。

[":tabIndexAbove(4)", "tabIndexAbove", "", "4"]

ご覧のとおり、 を使用して括弧内の値を取得できますmatch[3]。

質問：

jQuery 1.8 では、match配列はフィルター関数に渡されなくなりました。渡された情報にアクセスできないため、tabindexAboveフィルターは機能しなくなります(このフィドルと上記のフィドルの唯一の違いは、これが新しいバージョンの jQuery を使用することです)。

そこで、明確にしたいいくつかの点を以下に示します。

  1. これは予想される動作ですか？それはどこかに文書化されていますか？

  2. Sizzleこれは、更新されたという事実と関係がありますか(「Sizzle の古い API は、このリライトでは変更されていません」と明確に記載されていますが、おそらくこれは、「不要になったの削除」という意味ですSizzle.filter) 。 ?

  3. 配列にアクセスできなくなったmatchので、フィルターに渡される情報にアクセスする他の方法はありますか (この場合は4)。

jQuery Docs でカスタム フィルター セレクターに関するドキュメントを見つけたことがないため、これに関する情報をどこから探し始めればよいかわかりません。

4

2 に答える 2

10

jQuery は、Sizzle でカスタム疑似を作成するためのユーティリティを追加しました。これは少し冗長ですが、match[3] を使用するよりもはるかに読みやすいです。また、要素がテストされるたびに面倒な計算を繰り返さなくても済むため、パフォーマンスが向上するという利点もあります。すでに受け入れられている回答は良い回答ですが、sizzleFilter プロパティを自分で設定する代わりに $.expr.createPseudo を使用できるというメモを追加させてください。これにより、スペースが少し節約されます。

jQuery.expr[':'].tabIndexAbove = $.expr.createPseudo(function( tabindex ) {
    return function(elem) {
        return +elem.getAttribute('tabindex') > tabindex;
    }
});

$('input:tabIndexAbove(4)').css('background', 'teal');

jsfiddle: http://jsfiddle.net/timmywil/YCsCm/7/

これはすべて Sizzle の github で文書化されています: https://github.com/jquery/sizzle/wiki/Sizzle-Documentation

于 2012-08-06T18:45:20.520 に答える
7

jQuery 1.8 beta2 ソースとThe New Sizzleの「Extensibility」セクションを見ると、疑似引数とコンテキストを取得するためにを設定fn.sizzleFilterする必要があります。trueそうでない場合は、引数のすべての要素を取得するだけです。

これは、例と同じことを行うコードです。selector関数に渡されたパラメーターを使用して、疑似引数を取得します。

jsfiddleの実際の例を次に示します。

上記のブログ投稿で述べたように、セレクターをプリコンパイルしてキャッシュすることもできます。

var sizzle = jQuery.find;

var tabIndexAbove = function( selector, context, isXml ) {
    return function( elem ) {
        return elem.getAttribute("tabindex") > selector;
    };
};

/*
 fn.sizzleFilter is set to true to indicate that tabIndexAbove 
 is a function that will return a function for use by the compiler 
 and should be passed the pseudo argument, the context, and 
 whether or not the current context is xml. If this property is 
 not set, adding pseudos works similar to past versions of Sizzle
*/
tabIndexAbove.sizzleFilter = true;
sizzle.selectors.pseudos.tabIndexAbove = tabIndexAbove;

$('input:tabIndexAbove(4)').css('background', 'teal');

ソースを見ると、jQuery は一般向けインターフェイスが指す構造をわずかに変更していることに注意してください。

jQuery 1.7.2 では: 

jQuery.find = Sizzle;
jQuery.expr = Sizzle.selectors;
jQuery.expr[":"] = jQuery.expr.filters;

jQuery 1.8b2 では: 

jQuery.find = Sizzle;
jQuery.expr = Sizzle.selectors;
jQuery.expr[":"] = jQuery.expr.pseudos;
于 2012-07-24T16:23:15.407 に答える