How to exclude a child in children selector using jquery?

Question

I have a parent element div #mmm-a set to visibility , hidden by previous on click function and I'm using the following code to make it reappear on a page (on click):

jQuery("#mmm-a").css("visibility", "visible").fadeTo(300, 1);

This works fine, but when I trying to exclude a child #mmm-b from its parent div #mmm-a it didn't work, I'm tried this (and variations):

jQuery("#mmm-a").not("#mmm-b").css("visibility", "visible").fadeTo(300, 1);

What is wrong with my code? How do I make the whole div visible again, but keep one element inside it hidden?

Answer 1

jQuery("#mmm-a") selects only the single element with the ID "mmm-a". The .not("#mmm-b") wouldn't exclude anything from that selection -- it's still a single-element list. (The only way that would work is if the same element had both IDs: then the .not() would exclude it, winding up with a zero-element selection -- but this is impossible because one element can't have two IDs.)

A multi-element selection excluding a single child would look more like $('#mmm-a').find(':not(#mmm-b)') or $('#mmm-a :not(#mmm-b)') -- these would return a list of all child elements of mmm-a which are not mmm-b.

But that won't help you here either, because, you're using fadeTo which animates element's opacity , not its visibility. Opacity always affects child elements: a zero-opacity element will always have all of its contents at zero opacity, it's not possible to exclude a child from that.

Unlike opacity, child elements can be excluded from visibility rules:

 #a {visibility:hidden} #b {visibility:visible} 

 <div id="a"> hidden parent <div id="b">visible child</div> </div> 

...but visibility can't be animated (there's no partial state between "visible" and "hidden".)

If you need the parent's opacity to animate but the child's to stay visible, the only way is to restructure your HTML such that the element to stay visible isn't a child element of the one to be hidden.

EDIT: per comments below, though, you want to do this the other way around:

I want to child element to stay hidden while rest of a div fade to visible again, to manipulate child visibility later

...which is much easier!

 $('#go').on("click", function() { $('#b').css("visibility","hidden"); // hide child element $('#a') .css("opacity","0") // set opacity to 0 first, so the animation will work later .css("visibility","visible") // set visiblity to visible .fadeTo(300, 1) // animate opacity from 0 to 1 }); 

 #a, #v {visibility: hidden} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="a"> parent made visible <div id="b">child stays hidden</div> </div> <button id="go">Click me</button> 

Answer 2

The jQuery("#mmm-a").not("#mmm-b") meaning select #mmm-a that han not id mmm-b whereas you need to exclude special child from list of childrens.

Use this instead

 $("#mmm-a :not(#mmm-b)").css("visibility", "visible"); 

 #mmm-a {visibility: hidden} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="mmm-a"> <div>1</div> <div id="mmm-b">#mmm-b</div> <div>3</div> </div>