我有一个 HTML 页面：
<head></head>
<body>
<div>
<div>
<div id="myDiv">
</div>
</div>
</div>
</body>
如何使用jQuery隐藏除一个元素之外的所有元素？
48
- Amr Elgarhy
4个回答
85
这应该可以运行：
也许更简单的方法是将整个“可隐藏”页面部分包装在一个大容器元素中，然后直接隐藏该容器。
然后你只需要执行以下代码，这样更加简洁快速：
$('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');
- TM.
5
41
一个不错的通用方法：
$('#the_id').siblings().hide()
$('#the_id').parents().siblings().hide()
适用于任何元素类型。
- Chris Johnson
5
我是否漏掉了什么，或者这种方法对于嵌套深度的元素不起作用，因为它不是递归的？！ - L. Monty
1无论嵌套多深，您都可以使用元素的
#the_id来显示它。parents()集合包括所有祖先（向上递归）。您不能隐藏元素的父级，否则该元素本身也会被隐藏；您也不能隐藏元素的子级，否则该元素本身将没有内容（对于适用该概念的元素类型）。 - Chris Johnson之前的答案中，$("*").hide()可以隐藏所有元素，但是我却无法显示我想要的div。Chris Johnson的答案可以隐藏所有元素除了目标div。有人能解释一下这是如何实现的吗？ - Hugh Seagraves
我们正在修剪一棵树。您想要展示的内容是一个带有几个苹果的分支。该分支连接到一个枝干，然后连接到主干，最终连接到根部。您不想隐藏根部、主干或枝干——这些需要支撑您的分支。但是，您需要隐藏在您的枝干上的所有相邻分支，所有在主干上的相邻枝干，以及所有在根部上的相邻主干。我提供的两行代码可隐藏您的直接兄弟和向根部移动时每个元素的兄弟，但不会隐藏元素的父级、祖父级等。 - Chris Johnson
一行代码：
.siblings().hide().parents().siblings().hide() - stallingOne8
如果你的目标只是查看内容而不想看到其他任何东西，你可以这样做。你不需要使用jQuery:
document.body.innerHTML=document.getElementById('myDiv').innerHTML;
- Chad
1
$("div").each(function () { $(this).toggle(!!this.id); });
请注意，这将显式地显示#myDiv。如果您只想隐藏其他div，请使用以下代码：
$("div:not(#myDiv)").show();
然后你可以这样做：
$("#myDiv").appendTo("body");
- Anthony Mills
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
$("*").hide(); $("#myDiv").show();比$("*:not(#myDiv)")要快得多。 - nickf$('body > :not(#myDiv)').hide()。通常在 body 元素下直接有太多的元素。另外，正如我在答案中提到的那样，最好只是跳过这些无聊的东西，直接使用包装元素。 - TM.