Question

我有以下代码：

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

三个选择器，要明确的是：

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

我正在试图弄清楚是否有可能以某种方式减少它：

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

我知道如何轻松地使用非实时查询（例如使用.find），但我特别希望将此事件附加到$( '#parent' )

Answer 1

从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;
};

Answer 2

我不确定这是可能的，但我会尝试使用一些正则表达式来创作：

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

想法是事先创建选择器。

Answer 3

如果您可以控制类名是什么，则可以使用命名约定。 Rahter比.c，.d，.e等等，将它们命名为.c-d，.c-e，.c-f等。然后你可以使用[class^="c-"]作为选择器。

更具体的编辑：

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

Answer 4

感谢菲利克斯自己回答：

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 )

Answer 5

简化选择器的一种方法是在回调中移动.a .b测试：

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

但是从性能或代码维护的角度来看这是否可取，我不知道。

点击elclanrs' solution，您可以动态创建选择器：

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

除此之外，你无能为力。 CSS选择器不能以这种方式工作。

Answer 6

为什么不将常见的.a .b祖先选择器移动到目标上下文选择器中？这应该有效：

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

更新： @cwolves指出这只适用于静态.a .b，即在附加处理程序时出现在页面上，有点挫败了目的首先授权事件。

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

6 个答案: