How to use a not selector with multiple span classes?

Question

EXTENSION TO MY PREVIOUS Q How to select a span with multiple classes and placed inside an anchor?

** Adding an extension to this, I would like to add a class that needs to be ignored from the click event. hence I used below code which doesnt work. Any help will be appreciated!

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

I've also tried using span.c5 in the not selector but that doesnt work either :(

Please find the html change below:

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

score 3 · Accepted Answer · edited May 23 '17 at 10:34

3

You can use .not, which will filter all the elements you selected:

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

BTW, are you sure what you want is parents? I think what you really want is closest.

Here's the fiddle: http://jsfiddle.net/GCNKg/

Update: Since you mentioned in the comments that you have to use the :not selector because you're using event delegation, you'll have to either add :not to every selector, or just add the following filter to your script:

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

This adds the :any selector to jQuery/Sizzle (I based it off of this jQuery feature request, but updated it so that it works with the new Sizzle selector engine used by jQuery since version 1.8).

Once you have that filter included, you can use :any in your selectors, which'll work nicely with :not:

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

Here's the fiddle: http://jsfiddle.net/GCNKg/1/

edited May 23 '17 at 10:34

Community

1
1

answered Jan 25 '13 at 16:15

Joseph Silber

214,931
59
362
292

1

Thanks Joseph. using .not() worked! I'll try evaluating both the properties and test it out in different scenario's to see which one suits best. appreciate your response! – Evolving Techie Jan 25 '13 at 16:20
but how to use .not() with $('body').on("click", ".c1, .c2", function () { alert("clicked!"); } }) – Evolving Techie Jan 25 '13 at 16:23
1

@EvolvingTechie - You can't. In that case, you'll have to explicitly une the `:not` selector on each one of your selectors `".c1:not(.c5), .c2:not(.c5)"`. Or, just check for `hasClass('c5')` in your callback, and return early. – Joseph Silber Jan 25 '13 at 16:25
Awesome, using :not selector on each one of the existing selectors work. I'll also try to use hasClass. Thanks so much! – Evolving Techie Jan 25 '13 at 16:36
@EvolvingTechie - I added an easier solution for use the `:not` selector. Check out my update. – Joseph Silber Jan 25 '13 at 16:45

score 1 · Answer 2 · answered Jan 25 '13 at 16:16

1

Use the .not() function, rather than the selector. For example:

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

Here's a jsFiddle demo.

answered Jan 25 '13 at 16:16

BenM

52,573
26
113
168

+1 Using [`:any`](https://developer.mozilla.org/en-US/docs/CSS/%3aany) would have been *so* much easier. I wish jQuery supported this. Check out the update to my answer. Do you think we could somehow get this into the Sizzle core. Nobody [on this thread](http://forum.jquery.com/topic/feature-req-any-selector-filter) seems to realize how useful this is for event delegation. – Joseph Silber Jan 25 '13 at 16:49

How to use a not selector with multiple span classes?

2 Answers2