如何使用具有多个跨度类的非选择器？

Question

我上一个问题的扩展 How to select a span with multiple classes and placed inside an anchor?

**为此添加扩展，我想添加一个需要从点击事件中忽略的类。因此我使用了下面不起作用的代码。任何帮助将不胜感激！

$('span.c3, span.c4:not(.c5)').parents('a').click(function (e) {
            alert("clicked!");
   });

我也尝试在 not 选择器中使用 span.c5，但这也不起作用:(

请在下面找到 html 更改：

<div class="c0 c">
        <a class="c1 c2">
        <span class="c3 c4 c5"></span>Anchor_Text
        </a>
    </div>

Answer 1

您可以使用.not，它将过滤您选择的所有元素：

$('span.c3, span.c4').not('.c5').parents('a').click(function (e) {
    alert("clicked!");
});

顺便说一句，你确定你想要的是parents吗？我想你真正想要的是closest。

---

这是小提琴：http://jsfiddle.net/GCNKg/

---

更新：由于您在 cmets 中提到您必须使用 :not 选择器，因为您正在使用事件委托，因此您必须将 :not 添加到 每个 选择器，或者只是将以下过滤器添加到您的脚本中：

$.expr[':'].any = $.expr.createPseudo(function( selector ) {
    return function (el) {
        return $.find.matches(selector, [el]).length > 0;
    }
});

这会将 :any 选择器添加到 jQuery/Sizzle（我基于 this jQuery feature request，但对其进行了更新，使其适用于 the new Sizzle selector engine used by jQuery since version 1.8）。

一旦你包含了那个过滤器，你就可以在你的选择器中使用:any，它可以很好地与:not一起工作：

$(document.body).on('click', 'span:any(.c3, .c4):not(.c5)', function (e) {
    alert("clicked!");
});

这是小提琴：http://jsfiddle.net/GCNKg/1/

Answer 2

使用.not() 函数，而不是选择器。例如：

$('span.c3, span.c4').not('.c5').parents('a').click(function (e) {
    alert("clicked!");
});

这是jsFiddle demo。