Question

的 HTML 的

<body>
    <span>test</span>
    <span>test</span>
    <span>test</span>
    <span id="show">aaaaaa</span>
</body>

的 JS 的

$('body').hide();

$('#show').show();

为什么这不起作用？我怎样才能使它发挥作用？

现在所有内容都已隐藏，但如果我使用$('#show').show();，则应该#show可见。这可能吗？如果是，怎么样？

我希望在没有#show的情况下隐藏所有元素，但我无法修改HTML。

Answer 1

因为#show位于body内，因此不可见 body定义了文档的正文，它包含了所有元素，因此如果隐藏它，您将隐藏所有元素。
尽量隐藏你想要的元素。

Answer 2

通过在display: none上设置document.body（.hide()基本上就是这样），对#show的第二次调用变得非常无关紧要，因为父级仍然隐藏（body）。

您需要选择所有元素，而不需要特定节点并隐藏它们。

$(document.body).contents().not('#show, #show *').hide();

Answer 3

要隐藏所有没有id="show"的元素，您可以使用not function：

$('body').find('*').not('#show').hide();

或:not psuedoselector：

$('body').find(':not("#show")').hide();

编辑：还要显示#show的所有孩子，将其添加到非选择器：

$('body').find('*').not('#show, #show > *').hide();

http://jsfiddle.net/ZD7gm/3/

Answer 4

请改为尝试：

$('body').contents().hide();
$('#show').show();

<强> jsFiddle example

这将隐藏身体的所有孩子并显示ID为show的元素。

Answer 5

隐藏其他元素，而不是整个身体。

$('span').hide();
$('#show').show();

Answer 6

尝试在body标签后附加span，就像这样。

<body>
    <span>test</span>
    <span>test</span>
    <span>test</span>
    <span id="show">aaaaaa</span>
</body>    

$('body span').hide();

$('#show').show();

jsfiddle.net example

Answer 7

$('body').find('*').not('#show, #show > *').hide();

在hiddens元素中显示元素

7 个答案: