Why doesn't .not() work in this case?

Question

I have been desperately trying to figure out why .not() will not work in this case

link: http://jsfiddle.net/Kr8SA/4/

Thank you for your help.

 $('#site').not('#box') .fadeIn(); 

 #site { display: none; } div { border: 2px solid black; width: 300px; height: 300px; } #box { background: gray; } 

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

Answer 1

The .not function does not search within all the descendants of the given set. It filters the elements from the set. Since $('#site').length == 1 , it won't work.

Two alternatives would be

• $('#site *').not('#box')
• $('#site').find('*:not(#box)')

 $('#site *').not('#box').fadeIn() 

 /* Hide the elements we'll fade in */ #site *{ display: none; } div { border: 2px solid black; width: 300px; height: 300px; } #box { background: gray; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="site"> <div id="box"></div> <div>Something to show</div> </div> 

Answer 2

.not() works as an exclusion filter the current query result, not on children or other descendents. Your query only contains #site . So telling jQuery to exclude #box using .not() will do nothing.

Your query reads like:

• Include #site , our query result only contains #site now
• Exclude #box , our query doesn't contain #box so don't do anything
• Our final query result still only contains #site