4

次のコードがあります。

$( '#parent' ).on( 'click', '.a .b .c,.a .b .d,.a .b .e', function(){ ... });

明確にするために、3つのセレクターは次のとおりです。

.a .b .c
.a .b .d
.a .b .e

どうにかしてそれを減らすことができるかどうかを理解しようとしています：

.a .b (.c,.d,.e)

そして、非ライブクエリで簡単に行う方法を知っていますが（たとえば、を使用.find）、特にこのイベントをにアタッチしたい$( '#parent' )

4

6 に答える 6

2

誰かがこれを使用したい場合に備えて、OP から編集してください。以下のコメントの警告を読んでください。

これはあなたが探しているものですか？http://forum.jquery.com/topic/feature-req-any-selector-filter

jQuery.expr[':'].any = function(el, i, match) {
    return jQuery.find.matches(match[3], [el]).length > 0;
};
于 2013-02-08T01:54:02.793 に答える
1

それが可能かどうかはわかりませんが、正規表現を使ってクリエイティブにしようと思います。

$('#parent').on('click', 'c,d,e'.replace(/(\w+)/g, '.a.b.$1')

アイデアは、事前にセレクターを作成することです。

于 2013-02-08T01:37:08.637 に答える
1

クラス名を制御できる場合は、命名規則を使用できます。.c、.d、.e などではなく、.cd、.ce、.cf などの名前を付けると[class^="c-"]、セレクターとして使用できます。

より具体的に編集します。

$( '#parent' ).on( 'click', '.a .b [class|="c"] ...
于 2013-02-08T01:46:04.573 に答える
1

Felix のおかげで、自分でこれに答えることができます。

jQuery.expr[':'].matches = function( elem, index, match ){
    return $( elem ).is( match[3] );
};

$( '#parent' ).on( 'click', '.a .b :matches( .c, .d, .e )', ... );

パフォーマンス上の理由から、次のように少し最適化する必要があります。

.a .b nodeTypeOrOtherSelector:matches( .c, .d, .e )
于 2013-02-08T01:53:15.487 に答える
0

セレクターを少し単純化する 1 つの方法は、.a .bテストをコールバック内に移動することです。

$( '#parent' ).on('click', '.c, .d, .e', function(){
    if ($(this).closest('.a .b').length === 0) {
        // not the right element
        return;
    }
    // ...
});

しかし、これがパフォーマンスまたはコード メンテナンスの観点から望ましいかどうかはわかりません。

elclans' solutionを取り上げると、セレクターを動的に作成できます。

var ancestors = '.a .b';
var selector = ancestors + ['.c', '.d', '.e'].join(', ' + ancestors);

それ以外にできることはあまりありません。CSS セレクターは、このようには機能しません。

于 2013-02-08T01:37:41.510 に答える
0

.a .b共通の祖先セレクターをターゲット コンテキスト セレクターに移動しないのはなぜですか? これはうまくいくはずです：

$('#parent .a .b').on('click', '.c, .d, .e', function(){ ... });

更新: @cwolves は、これが静的.a .b、つまりハンドラーのアタッチ時にページに存在する場合にのみ機能することを指摘しており、委任されたイベントの目的をそもそも無効にしています。

于 2013-02-08T01:42:02.017 に答える