0

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

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

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

那是我现在拥有的代码，但它不起作用。它隐藏了所有内容，但之后不显示段落。我究竟做错了什么？

4

7 回答 7

3

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

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

将其阅读为：在<body>元素中找到所有不是 <p>的元素。

我怀疑您的标记非常简单，嵌套元素最少，例如

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

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

于 2012-10-19T19:38:36.617 回答
2

您不能显示隐藏父母的孩子。你试图做的事情是行不通的。您必须确保<p>标签的祖先都是可见的，一直到<body>和<html>。

作为一种解决方法，您可以将所有<p>标签从它们的父母身上分离出来，隐藏身体内留下的所有东西，然后<p>直接重新附加到身体上。就恢复其原始状态而言，此时您的 dom 将被不可逆转地破坏。

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

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

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

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

于 2012-10-19T19:39:33.963 回答
1

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

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

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

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

$(':not(:has(p), p)').hide();
于 2012-10-19T19:38:55.130 回答
1 
$('body :not(p)').hide();
$('body p').appendTo('body');

隐藏除段落之外的所有内容，然后将段落移动为正文的直接子级。

请注意，“appendTo”和其他方法实际上并不克隆元素，如果它们已经存在于 DOM 中，则只是移动它们。

于 2012-10-19T19:40:20.980 回答
0

问题是即使段落是可见的body，包裹它们的仍然是隐藏的..所以即使你让它们可见你也不会看到这些段落..因为作为主体的父级也被隐藏了..

于 2012-10-19T19:38:52.893 回答
0

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

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

正如 MarcB 在评论中指出的那样，你也需要.show()所有的<p>父母（这就是这样.parents().show()做的）

于 2012-10-19T19:39:11.073 回答
0

如果 P 的父项被隐藏，则不会显示 P。

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

如果要显示所有 p 但隐藏其他 p，可以将所有 p 附加到 body 为：

(function() {
  var all = $("body *").not("p");
  all.hide();
   $("p").appendTo('body');
 })();
于 2012-10-19T19:40:09.177 回答