如何使用jquery隐藏除一个元素之外的所有元素？

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');

关于效率的话题,运行`$("*")会更快*.(hide;); $("#myDiv").show();`与`$("*:not(#myDiv)"相比较)` (4认同)

Answer 2

一个很好的通用方法:

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

适用于任何元素类型.

Answer 3

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

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