我可以使用jQuery定位多个实时子选择器

Question

I have the following code:

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

the three selectors, to be clear are:

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

I'm trying to figure out if it's possible to reduce that somehow:

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

And I know how to do it with non-live queries easily (eg with .find ), but I specifically want this event to be attached to $( '#parent' )

Answer 1

edit from OP in case anyone wants to use this: read the warning in my comment below

Is this what you looking for? 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;
};

Answer 2

I'm not sure that's possible but I would try getting creative with some regex:

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

The idea is to create the selector before hand.

Answer 3

If you have control over what the class names are, you can use a naming convention. Rahter than .c, .d, .e and so on, name them .cd, .ce, .cf, etc. Then you can use [class^="c-"] as the selector.

Edit with more concreteness:

$( '#parent' ).on( 'click', '.a .b [class|="c"] ...

Answer 4

Answering this myself thanks to Felix:

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

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

which should, for performance reasons, be optimized a bit to:

.a .b nodeTypeOrOtherSelector:matches( .c, .d, .e )

Answer 5

One way to simplify the selector a little bit would be moving the .a .b test inside the callback:

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

But whether this is desirable from a performance or code maintenance point of view, I don't know.

Picking up on elclanrs' solution , you can create the selector dynamically:

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

---

Apart from that there is not much you can do. CSS selectors just don't work this way.

Answer 6

Why not move the common .a .b ancestor selectors into the target context selector? This should work:

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

Update: @cwolves is correct in pointing out that this would only work for static .a .b ie present on the page at the time of attaching the handler, kind of defeating the purpose of delegated events in the first place.