JQuery - multiple: not a selector

Question

I am trying to customize links to pages that do not start with "#" and do not include embedded javascript, but I am having problems figuring out how to properly structure the selector.

Based on what I searched in several selectors, this should work, both selectors work independently, just not together!

$('a:not([href*=javascript]), a:not([href^=#])') .each(function(){... 

Answer 1

Try using

 $('a:not([href*=javascript]):not([href^=#])') ... 

Answer 2

You can also try:

 $('a').not('[href^=#],[href*=javascript]') 

Answer 3

As pointed out in jQuery - multiple selectors in a: not ()? is the right way to do this:

 $( 'a:not([href*=javascript],[href^=#])' ) 

---

Remember to use quotation marks with a comma if you already have your selectors for negating variables

 var selOne = '[href*=javascript]'; var selTwo = '[href^=#]'; $('a:not(' + selOne + ',' + selTwo + ')') 

I admit that the code is a bit confusing, but has the advantage that you can do things like this:

 var selOne = '[href*=javascript], [href^=#]'; var selTwo = '.anotherSelector, .andAnother, .andSoOn'; $('a:not(' + selOne + ',' + selTwo + ')') 

This is useful when you need to group selectors for some reason, i.e. using the same group of selectors somewhere else in the code.

---

Live example using the same technique

 $('div:not(.rose-flower,.bus-vehicle)').css('color','red'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="bus-vehicle">I am a bus</div> <div class="strawberry-fruit">I am a strawberry</div> <div class="rose-flower">I am a rose</div> 

Also at http://jsfiddle.net/bmL8gz5j/

---

:not vs .not() : For performance reasons, you should use :not , not .not() , see Differences in performance between using ": not" and ".not ()" selectors?