首页 > 解决方案 > querySelectorAll 不在父级中的元素 display: none

问题描述

我正在尝试使用display: none获取不在父母中的所有(特定)元素。

目前,我正在使用以下内容:

const displayNoneElements = Array.from(
    document.querySelectorAll(
        '*not:[style*="display:none;"], [style*="display: none"], [style*="display: none;"], [style*="display:none"]'
    )
);

const hiddenIssues = displayNoneElements.flatMap((element) =>
    Array.from(element.querySelectorAll(SPECIFIC_TAG))
);

// Filters the issues which are in parents with display none
issues = Array.from(document.getElementsByTagName(SPECIFIC_TAG)).filter((issue) => {
    for (let hiddenIssue of hiddenIssues) {
        if (hiddenIssue.isSameNode(issue)) {
            return false;
        }
    }
    return true;
});

上面的代码正在完成这项工作,但我确信只有一些适当的选择器会有更优雅的解决方案。

提前致谢。

标签: javascriptoptimizationcss-selectorsqueryselector

解决方案


推荐阅读