Question

我正在尝试学习jquery，所以我试图写一个脚本，它会隐藏页面上的大部分内容，只留下（现在）段落。

(function() {
  var all = $("*");
  all.hide();

  var paragraphs = $("p");
  paragraphs.show();
 })();

这是我现在的代码，但它不起作用。它隐藏了一切，但之后没有显示段落。我做错了什么？

Answer 1

这是一个开始的解决方案：

$("body :not(p)").hide();

将其读作：在<body>元素中找到所有不 的元素。

我怀疑你的标记很简单，嵌套元素最少，例如

<html>
<head></head>
<body>
    <h1>Heading</h1>
    <p>Paragraph 1</p>
    <div>Text block</div>
    <p>Paragraph 2</p>
</body>
</html>

否则，正如其他答案（和评论）中所述，您应该考虑您的元素是否包含非个父母。在这种情况下，嵌套段落可能仍然不可见。

Answer 2

您无法显示隐藏父级的子级。你想要做的事情是行不通的。您必须确保标记的祖先全部可见，一直到<body>和<html>。

作为解决方法，您可以从父母那里分离所有标签，隐藏身体内的所有内容，并将直接重新附加到身体上。就恢复原状而言，你的dom将在此时不可逆转地被打破。

var paragraphs = $('p').detach();

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

$('body').append(paragraphs);

我想不出任何实际用途。您可能需要重新考虑您要做的事情并更改标记以适应您的新知识。

Answer 3

隐藏所有内容也会隐藏每个的所有父元素，包括<html>和<body>。如果元素可见，您需要确保它们可见。

相反，请显示段落及其父母：

$('*').hide();
$('p').parents().andSelf().show();

或者，只隐藏不包含段落的元素：

$(':not(:has(p), p)').hide();

Answer 4

$('body :not(p)').hide();
$('body p').appendTo('body');

隐藏除了段落之外的所有内容，然后将段落移动为身体的直接子项。

请注意，“appendTo”和其他方法不实际克隆元素，但只要它们已经存在于DOM中就移动它们。

Answer 5

即使段落是可见的，包含它们的body仍然是隐藏的......所以即使你让它们可见，你也不会看到段落..因为父级是哪个是身体也是隐藏的..

Answer 6

我的猜测是*通配符包含<body>。尝试：

$("body *").hide();
$("p").show().parents().show();

正如MarcB在评论中指出的那样，您需要.show()所有个父母（这是.parents().show()所做的）

Answer 7

如果其父母被隐藏，则不会显示P.

(function() {
  var all = $("body *").not("p");
  all.hide();
 })();

如果你想显示所有p但隐藏其他p，你可以将所有p附加到body身上：

(function() {
  var all = $("body *").not("p");
  all.hide();
   $("p").appendTo('body');
 })();