How to hide all elements except one using jquery?

I have HTML page:

<head></head>
<body>
  <div>
    <div>
      <div id="myDiv">
      </div>
    </div>
  </div>
</body>

How to hide all divs, and just have the myDiv inside the body using jquery?

Update

The page may contain some other html elements such as some tables, anchors, p, and i just want to see the myDiv element.

Solution 1:

This should work:

$('div:not(#myDiv)').hide();  // hide everything that isn't #myDiv
$('#myDiv').appendTo('body');  // move #myDiv up to the body

Update:

If you want to hide EVERYTHING that, not just div elements, use this instead:

$('body > :not(#myDiv)').hide(); //hide all nodes directly under the body
$('#myDiv').appendTo('body');

Probably simpler is to wrap the entire "hideable" part of the page in a big container element, and hide that directly though.

Like so:

 <body>
     <div id="contents">
        <!-- a lot of other stuff here -->
        <div id="myDiv>
        </div>
     </div>
 </body>

Then you can just do this, which is cleaner and faster:

$('#contents').hide();
$('#myDiv').appendTo('body');

A nice general approach:

$('#the_id').siblings().hide()
$('#the_id').parents().siblings().hide()

Works for any element type.

If you're objective is just to see that content and not see anything else, you can always just do this. You don't need jQuery:

document.body.innerHTML=document.getElementById('myDiv').innerHTML;

$("div").each(function () { $(this).toggle(!!this.id); });

Note that this will explicitly show #myDiv. If you just want to hide the other divs:

$("div:not(#myDiv)").show();

Then you can do:

$("#myDiv").appendTo("body");