jQuery exclude elements with certain class in selector

Question

I want to setup a click event trigger in jQuery for certain anchor tags.

I want to open certain links in a new tab while ignoring ones with a certain class (before you ask I cannot put classes on the links I am trying to catch as they come from a CMS).

I want to exclude links with class "button" OR "generic_link"

I have tried:

$(".content_box a[class!=button]").click(function (e) {
    e.preventDefault();     
    window.open($(this).attr('href'));
});

But that doesn't seem to work, also how do I do an OR statement to include "generic_link" in the exclusion?

Community · Accepted Answer · 2017-05-23 12:03:05Z

322

You can use the .not() method:

$(".content_box a").not(".button")

Alternatively, you can also use the :not() selector:

$(".content_box a:not('.button')")

There is little difference between the two approaches, except .not() is more readable (especially when chained) and :not() is very marginally faster. See this Stack Overflow answer for more info on the differences.

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered Jun 10, 2010 at 14:12

Pranay Rana

177k37 gold badges244 silver badges267 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Titan Over a year ago

So I could do: $(".content_box a").not(".button").not(".generic_link").click(function (e)...?

cfx Over a year ago

Worked perfectly, even when using .each().

Netsi1964 Over a year ago

It seems that there is a bug when using .text() - the text of the element removed using say .not is still in the text.

sushil bharwani · Accepted Answer · 2010-06-10 14:11:43Z

29

use this..

$(".content_box a:not('.button')")

answered Jun 10, 2010 at 14:11

sushil bharwani

30.2k30 gold badges98 silver badges130 bronze badges

Comments

Vignesh Raja · Accepted Answer · 2018-07-25 20:21:57Z

To add some info that helped me today, a jQuery object/this can also be passed in to the .not() selector.

$(document).ready(function(){
    $(".navitem").click(function(){
        $(".navitem").removeClass("active");
        $(".navitem").not($(this)).addClass("active");
    });
});

.navitem
{
    width: 100px;
    background: red;
    color: white;
    display: inline-block;
    position: relative;
    text-align: center;
}
.navitem.active
{
    background:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="navitem">Home</div>
<div class="navitem">About</div>
<div class="navitem">Pricing</div>

The above example can be simplified, but wanted to show the usage of this in the not() selector.

Collectives™ on Stack Overflow

jQuery exclude elements with certain class in selector

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related