Как скрыть все элементы, кроме одного с помощью jquery?

У меня есть HTML-страница:

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

Как скрыть все divs и просто иметь myDiv внутри тела с помощью jquery?

Обновление

Страница может содержать некоторые другие элементы html, такие как некоторые таблицы, привязки, p, и я просто хочу увидеть элемент myDiv.

Ответы

Это должно работать:

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

Update:

Если вы хотите скрыть ВСЕ, а не только элементы div, используйте вместо этого:

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

Наверное, проще всего обернуть всю "скрываемую" часть страницы в большой элемент контейнера и скрыть это прямо.

Так же:

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

Тогда вы можете просто сделать это, что является более чистым и быстрым:

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

Хороший общий подход:

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

Работает для любого типа элемента.

Если вы объективны, это просто увидеть этот контент и не видеть ничего другого, вы всегда можете это сделать. Вам не нужен jQuery:

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

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

Обратите внимание, что это явно покажет #myDiv. Если вы просто хотите скрыть другие divs:

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

Затем вы можете сделать:

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