javascript - JS : Hide all elements except of one (by id) (and all of its descending child elements and its parents)-6ren

javascript - JS : Hide all elements except of one (by id) (and all of its descending child elements and its parents)

转载作者：行者123 更新时间：2023-11-30 11:34:53

24

4

我尝试选择页面上的所有元素，除了#content_container 及其所有后代子元素及其所有父元素。稍后我想隐藏所有选中的元素。

但是我已经失败了:

var elems = document.querySelectorAll("body *:not(#content_container *)");

浏览器控制台(chrome)返回:无法在“Document”上执行“querySelectorAll”:“body *:not(#content_container *)”不是有效的选择器。

而 "body *:not(#content_container)" 不会返回错误。

如何做到这一点？注意:不能使用 jQuery。

编辑:你们中的一些人想要一个例子。目标是让#content_container 及其内容在网站上可见，而所有其他内容将被隐藏。

<body>
<div class="hide">
    <div class="hide">

    </div>
</div>
<div>
    <div>
        <div class="hide">
            <div class="hide">

            </div>
        </div>
        <div id="content_container">
            <p>  ------- content_container div ------- </p>
            <div>
                    <div>
                            <div>

                            </div>
                    </div>
            </div>
            <div>

            </div>    
        </div>
    </div>
    <div class="hide">

    </div>
</div>
<div class="hide">
    <div class="hide">
        <div class="hide">
            <div class="hide">

            </div>
        </div>
    </div>
</div>
<div class="hide">
    <div class="hide">

    </div>
</div>

最佳答案

我能看到的唯一方法是获取主题节点，然后将其所有兄弟节点添加到“不显示”集合中，然后向上移动其父节点，收集并添加所有兄弟节点，停止在 body 上。

以下仅添加 sibling 和父 sibling ，而不是节点本身或其直接祖先，一旦处理完 body 子节点就停止。它还只收集元素节点并忽略所有其他元素节点，因此空的 #text 节点兄弟仍将存在，但不应影响布局。如果您想摆脱这些，只需删除它们即可。

单击“隐藏内容”按钮。

function hideStuff(){
  var el = document.querySelector('#content_container');
  var node, nodes = [];
  
  do {
    var parent = el.parentNode;
    
    // Collect element children
    for (var i=0, iLen=parent.childNodes.length; i<iLen; i++) {
      node = parent.childNodes[i];

      // Collect only sibling nodes that are elements and not the current element
      if (node.nodeType == 1 && node != el) {
        nodes.push(node);
      }
    }

    // Go up to parent
    el = parent;

  // Stop when processed the body's child nodes
  } while (el.tagName.toLowerCase() != 'body');

  // Hide the collected nodes
  nodes.forEach(function(node){
    node.style.display = 'none';
  });
}

<body>
  <div class="hide">hide
    <div class="hide">hide
      
    </div>
  </div>
  <div>
    <div>
      <div class="hide">hide
        <div class="hide">hide
          
        </div>
      </div>
      <div id="content_container">
        <p>  ------- content_container div ------- </p>
        <button onclick="hideStuff()">Hide stuff</button>
        <div>don't hide
          <div>don't hide
            <div>don't hide
              
            </div>
          </div>
        </div>
        <div>don't hide
          
        </div>
      </div>
    </div>
    <div class="hide">hide
      
    </div>
  </div>
  <div class="hide">hide
    <div class="hide">hide
      <div class="hide">hide
        <div class="hide">hide
          
        </div>
      </div>
    </div>
  </div>
  <div class="hide">hide
    <div class="hide">hide
      
    </div>
  </div>
</body>

关于javascript - JS : Hide all elements except of one (by id) (and all of its descending child elements and its parents)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44876358/

24

4

0

文章推荐： java - 制作四元数相机

文章推荐： java - 拖尾文件时java中的巨大虚拟内存

文章推荐： javascript - 在 HTML 链接中使用 javascript 变量时的正确语法

文章推荐： Java AffinetransformOp filter() 搞砸了我的形象

CSS :Select all elements descendent of X but not descendents of Y
我希望能够选择类 zz 的所有元素，这些元素是类 xx 的元素的后代，但不是类 yy 的后代。考虑以下几点: ... arbitrary depth ...
CSS 性能 : descendent or two direct descendent selectors best?
给定以下 HTML: li > a { color: black } ul a { color: black } 最佳答案 The most fundamental conc
JQuery初学者: :has for direct descendants only
假设树结构如下:(丑陋的遗留布局，抱歉) (1) dont want to select this one
c - 基数排序 : Descending
这是我的 RadixSort 函数(升序): void RadixSort (int a[], int n) { int i, m=0, exp=1, b[MAX]; for (i=0
tsql - DESCENDING/ASCENDING 存储过程的参数
我有以下 SP CREATE PROCEDURE GetAllHouses set @webRegionID = 2 set @sortBy = 'case_no' set @
delphi - delphi中的"descending"记录？
我知道你实际上无法从记录中继承任何内容，但我不知道如何用一句话总结我的问题。如果需要，请编辑标题。我在这里想做的是创建一个某种泛型类型的数组，它可以是 X 种类型之一，该数组将填充这些自定义类型(它
silverlight - XDocument.Descendants() 不返回任何元素
我正在尝试将 Silverlight DataGrid 绑定(bind)到 WCF 服务调用的结果。我没有看到网格中显示的数据，所以当我运行调试器时，我注意到 XDocument.Descendant
namespaces - XElement.Descendants 不适用于命名空间
我有一个简单的 XML，我想找到所有“H”节点。 XElement x = XElement.Parse(""); IEnumerable h = x.Descendants("H"); if (
python - BeautifulSoup，.descendants 的顺序是什么？
使用 beautifulsoup 时 soup.descendants迭代器，生成的标签是否保证以任何特定顺序返回？由于文档提到事物是递归迭代的，所以我猜测事物是按 DFS 顺序返回的，但我不确定这是
MySql 更新行，它是 "Descendants"
我无法弄清楚如何更新一行的后代/子代。示例表，命名为 test +----+--------+------+ | Id | Parent | Val | +----+--------+------+
javascript - querySelectorAll 的选择器无效 :not with descendants
我遇到了这样的情况:我需要在页面上选择不同的节点组，并且需要排除某些子元素。我最常见的任务是选择所有元素，但不是某些元素的后代。以我的 fiddle 为例:http://jsfiddle.net/
html - 如何禁用 :hover on descendants?
链接: http://jsbin.com/EFAlace/3/edit?html,css,output HTML: Hover over me! Weird link
CSS 选择器意思是 "...except for descendants of..."
你好，有一个像这样的 DOM，需要选择除 div.hidden 部分的后代元素之外的所有 a 元素。 Some text Email Alex Some more text
html - CSS :not() selector on all descendants
这个问题在这里已经有了答案: Is the CSS :not() selector supposed to work with distant descendants? (2 个答案) 关闭 5 年
c# - XDocument.Descendants 不返回后代
6000 7000 2 5 3 6 9
xml - XElement.Descendants () 使其不区分大小写
XElement.Descendants () 方法接受要查找的元素的名称。但是它是区分大小写的，有没有办法让它不区分大小写最佳答案你可以使用这个: element.Descendants()
reactjs - 警告 : validateDOMNesting(…): cannot appear as a descendant of
我正在使用 React 路由器 dom Link 组件。它基本上是推特的主页。我希望能够在一个 div 组件中有两种类型的链接。一个是链接到用户的个人资料，另一个是发布。我目前收到警告，暂时找不到解决
reactjs - react : Passing Props to Descendants
是否有推荐的模式将 props 传递给 React 中的后代组件？下面，我将 propcallback 传递给子组件: Master = React.createClass({ render:
xpath - xpath中的//node和/descendant::node有什么区别？
在使用Selenium定位网页中的元素时，我使用了很多XPath，并且最近从使用node1 // node2转向使用node1 / descendant::node2。两种方法有什么区别？一个比另一个
terminology - 总是无法将这些词分开 : ascending and descending! 有好的例子吗？
已关闭。这个问题是 off-topic 。目前不接受答案。想要改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。已关闭13 年前。 Improve th

首页

博学

6Ren·AI

商城

javascript - JS : Hide all elements except of one (by id) (and all of its descending child elements and its parents)