使用 Greasemonkey 隐藏 select 个节点的多级父级？

Question

如果 CSS4 标准到位，我想做的事情可以轻松完成。但是，我希望在此期间用 Greasemonkey 做一些类似的事情，并了解更多关于父选择器的信息。

我早期的尝试看起来有点像这样：

$(document).find("minds-remind").parentElement.style.display = 'none';

我要访问的元素是：

minds-activity < div < div < minds-remind

因此，如果它包含 minds-remind，则仅在该实例中隐藏父项 minds-activity。有数百个 minds-activity 元素，我只希望包含 div div minds-remind 的元素隐藏。

任何帮助将不胜感激，我很想更好地了解将来如何着手实现这一目标。 :)

Answer 1

您似乎在尝试使用 jQuery，因此您可以使用 the jQuery :has selector。像这样：

$(".minds-activity:has('.minds-remind')").hide ();

或者更精确（但也更脆弱）：

$(".minds-activity > div > div > .minds-remind").parents (".minds-activity").hide ();

普通的 javascript 等效于：

document.querySelectorAll (".minds-activity > div > div > .minds-remind").forEach ( function (node) {
    node.parentNode.parentNode.parentNode.style.display = "none";
} );

对于 AJAX 个驱动页面，使用 waitForKeyElements()，像这样：

// ==UserScript==
// @name     _Hiding ancestors of select content
// @match    http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
//- The @grant directive is needed to restore the proper sandbox.

waitForKeyElements (
    ".minds-activity > div > div > .minds-remind", hideAncestor
);

function hideAncestor (jNode) {
    jNode.parents (".minds-activity").hide ();
}

比较“够好？”选择器到更多 precise/brittle 个（运行代码片段按钮，如下）：

$("button").click ( function (zEvent) {
    $("body > div").removeAttr ("style");
    switch (zEvent.target.id) {
        case "okay":
            $(".minds-activity:has('.minds-remind')").css ("background", "pink");
            break;
        case "precise":
            $(".minds-activity > div > div > .minds-remind").parents (".minds-activity").css ("background", "pink");
            break;
        default:
            console.error ("Missing case in button click handler: ", zEvent.target.id);
            break;
    }
} );

body > div {
    margin: 1ex;
    border: 1px solid gray;
    border-radius: 1ex;
    display: inline-block;
}
body > div > div {
    display: table;
    height: 3em;
}
body > div > div > div {
    display: table-cell;
    vertical-align: middle;
    min-width: 20vw;
    text-align: center;
}
button { margin: 1ex; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="minds-activity">
    <div><div><div class="">Good</div></div></div>
</div>
<div class="minds-activity">
    <div><div><div class="minds-remind">Bad</div></div></div>
</div>
<div class="minds-activity">
    <div><div><div><div class="minds-remind">Ugly</div></div></div></div>
</div>
<div class="hive-minds">
    <div><div><div class="minds-remind">Martian</div></div></div>
</div>
<button id="okay">Test good enough jQuery</button>
<button id="precise">Test precise jQuery</button>

使用 Greasemonkey 隐藏 select 个节点的多级父级？

Using Greasemonkey to hide a multilevel parent of select nodes?

html

javascript

css

greasemonkey

userscripts