jQuery - Combining multiple element selectors with :not - how

Question

I am having a devil of a time getting two selectors to work together as well as do when I declared seperate.

My issue:

I want to close a menu when I move to any input OR anchor tag that is NOT contained with a certain element. When I explicitly code for both input and anchor, I get the behavior I need - BUT when I try to condense my code and combine them, it behaves weirdly and does not work as intended.

So, basically when a user focus's in an input field or anchor that is NOT a child of my selector I want to close a menu. When I use two sperate handlers, it works. I want to combine them.

I am trying to shorten this....

jQuery('#hdr input:not(#opt *)')
.focusin(function(event){
   setTimeout(function(){
       jQuery("#opt").hide()
   },100);
 });
jQuery('#hdr a:not(#opt *)')
.focusin(function(event){
   setTimeout(function(){
       jQuery("#opt").hide();
   },100);
 });

I've tried all of this into one line, to no avail:

jQuery('#hdr a input:not(#opt *)')
jQuery('#hdr a, #hdr input:not(#opt *)') <-- I expect this to work, but doesn't.
jQuery('#hdr a,input:not(#opt *)')
jQuery('#hdr *:not(#opt *)')

It seems to only work when I do a single arg like: #hdr a , or #hdr input BUT when I try to combine them, no luck. I've searched high and low but no luck.

elclanrs · Accepted Answer · 2013-01-27 08:38:51Z

4

You can use the not method:

$('#hdr').find('a,input').not('#opt *')

Sometimes it's just better and more readable to use the methods instead of a huge selector string.

edited Jan 27, 2013 at 8:38

answered Jan 27, 2013 at 8:32

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

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

1 Comment

james emanon Over a year ago

yeah - gosh I was "gonna" use find but not sure why I didn't event bother with it. Your way worked great! Thanks a bunch.

Talha Akbar · Accepted Answer · 2013-01-27 08:47:53Z

2

All the elements are child of #opt and not selector ensure that #opt which is parent and all the elements or nodes in it are prevented from event handler. Like this in Fiddle:

Working Fiddle

Also The Method of @elclanrs works.

$("#hdr a:not(#opt), #hdr input:not(#opt)")

answered Jan 27, 2013 at 8:47

Talha Akbar

10.1k7 gold badges41 silver badges62 bronze badges

Collectives™ on Stack Overflow

jQuery - Combining multiple element selectors with :not - how

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related