Kamil Pietnicki Kamil Pietnicki - 1 month ago 8
CSS Question

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

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

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>