在隐藏元素中显示元素

Show element in hiddens elements

本文关键字：元素 显示 隐藏      更新时间：2024-01-25

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。

因为#show位于不可见的body内部
body定义文档的主体，它包含您的所有元素，所以如果您隐藏它，您将隐藏所有元素
试着只隐藏你想要的元素。

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

您需要选择没有特定节点的所有元素并隐藏这些元素。

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

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

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

或:not伪选择器：

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

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

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

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

试试这个：

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

jsFiddle示例

这将隐藏主体的所有子项，并显示ID为show的元素。

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

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

试着在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示例

$('body').find('*').not('#show, #show > *').hide();
相关文章：