Reputation: 10612
I have a container for all my elements and I hide all of its children like so :
$("#svgContainer").children().hide();
I have two elements that are the 'SVGContainer''s grandchildren :
#canvasParent
& #canvasChild
.
I have tried doing this :
$("#svgContainer").children().hide();
$("#canvasParent").show();
$("#canvasChild").show();
This doesn't seem to work, probably because the display:none;
gets given to the parent not the child.
How do I go about hiding every one of the SVGContainers children except for the elements with id's : #canvasParent
& #canvasChild
.
Here's a fiddle of the layout I have : http://jsfiddle.net/o9zowx3b/1/
Notice it hides all elements still, I think this is due to them being grandchildren not children of the svgContainer
Upvotes: 1
Views: 993
Reputation: 3429
What you're wanting to do is hide all of the siblings of a particular element. That's relatively simple with jQuery using the .siblings method:
$("#svgContainer").children().hide();
This will hide all elements on the same level, in the same parent element.
Upvotes: 2
Reputation: 193261
You can also do it with single selector:
$("#svgContainer > :not(#canvasParent,#canvasChild)").hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="svgContainer">
<div id="canvasParent">canvasParent</div>
<div>should be hidden</div>
<div id="canvasChild">canvasChild</div>
</div>
Upvotes: 1
Reputation: 819
This will select all children except the 2 children.
$("#svgContainer").children().not("#canvasParent,#canvasChild").hide();
Upvotes: 1
Reputation: 492
This should work as requested.
$('#svgContainer').children().not('#canvasParent').not('#canvasChild').hide();
Here is a fiddle, specially for you!
Good luck.
Upvotes: 2