Question

我有HTML页面：

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

如何隐藏所有div，并使用jquery将myDiv放在体内？

更新

该页面可能包含一些其他html元素，例如一些表格，锚点，p，我只想查看myDiv元素。

Answer 1

这应该有效：

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

<强>更新

如果你想隐藏一切，而不仅仅是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');

Answer 2

一个很好的通用方法：

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

适用于任何元素类型。

Answer 3

如果你的目标只是看到那些内容而没有看到任何其他东西，你可以随时做到这一点。你不需要jQuery：

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

Answer 4

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

请注意，这将显式 show #myDiv。如果你只想隐藏其他div：

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

然后你可以这样做：

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