使用 Greasemonkey 隐藏选择节点的多级父节点？

Question

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

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

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

我要访问的元素是：

minds-activity < div < div < minds-remind

因此，如果它包含 minds-remind，则仅在该实例中隐藏父 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 ();
}

---

---

比较“¿足够好？”选择器更精确/更脆弱（运行代码 sn-p 按钮，如下）：

$("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>