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。像这样：

<input required="">

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

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

普通的javascript等价物：

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

对于AJAX驱动的页面，请使用document.querySelectorAll (".minds-activity > div > div > .minds-remind").forEach ( function (node) { node.parentNode.parentNode.parentNode.style.display = "none"; } );，如下所示：

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 ();
}

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

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

1 个答案: