Select 包含基于 CSS 和内容的行

Question

我知道如何处理 CSS，所以我可以创建自定义过滤器来阻止某些带有 chrome 扩展名为 [=36= 的网站的 post 的名字].

但是，由于 CSS3 选择器不允许反向搜索，我想在 Chrome 和 jQuery 或 javascript 中使用 Tampermonkey 增强我的自定义过滤器。

我想要的是像下面这样的 javascript 效果（它还不适用于 CSS3。）

.wordbreak[content="USER_NAME"] < a < tr {display:none!important}

我的意思是；找到名为 wordbreak 的类也包含第一个文本 'USER_NAME'，如果 "tr" 兄弟树形成为，则将它们的样式设置为 "display:none"； tr > a > .wordbreak + 内文为"USER_NAME"

我浏览了 greasemonkey.org 以找到类似的东西，但我不知道如何让它发挥作用。帮助将不胜感激！

Link of the page 我要修改

post 的列表，我想隐藏由“LibereQ 创作的行：

第一枪：

// ==UserScript==
// @name         Black list
// @match        https://cafe.naver.com/MyCafeIntro*
// @match        https://cafe.naver.com/jssct*
// @match        https://cafe.naver.com/jssct
// ==/UserScript==

document.querySelectorAll('tr > td > div > table > tbody > tr > td > a > .wordbreak').forEach(wordbreak => {
  if (wordbreak.textContent.includes('LiberaQ')) wordbreak.style.display = 'none';
}, 1000);

Answer 1

Select 所有匹配选择器字符串的 .wordbreak，检查它们的 textContent。如果包含USER_NAME，设置元素的display 属性:

document.querySelectorAll('tr > a > .wordbreak').forEach(wordbreak => {
  if (wordbreak.textContent.includes('USER_NAME')) {
    wordbreak.style.display = 'none';
  }
});

（但是你确定你有一个a是tr的直系后代吗？如果它是有效的HTML你应该在那里看到 td，并且可能使用更像 tr > td > a > .wordbreak)

的东西

Answer 2

该脚本有 3 个主要问题：

目标页面由 AJAX (javascript) 驱动，因此您必须使用 AJAX 感知技术，例如 MutationObserver 或 waitForKeyElements。
选择器过于复杂 -- 这意味着：
(a) 你必须完全正确，缺少 tds（例如）是破坏交易的因素
(b) 脚本变得更加脆弱（可能在某些页面上失败，或在未来失败）。
@match 列表有误。您似乎定位的实际内容位于 iframe 中，其地址如下：cafe.naver.com/ArticleList.nhn?search....

您想要的内容已方便地用 wordbreak class 标记。这本身就是理想的选择器（基于您展示的内容）。保持简单。

同时保持 @match 简单，但您可能会接受替代方案。

这里有一个完整的脚本来说明这个过程：

// ==UserScript==
// @name        Black list
// @match       https://cafe.naver.com/*
// @require     https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require     https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant       GM_addStyle
// @grant       GM.getValue
// ==/UserScript==
//- The @grant directives are needed to restore the proper sandbox.

//Possible alternate match:
// @match       https://cafe.naver.com/ArticleList*

waitForKeyElements (".wordbreak", hideBlackListedNode);

function hideBlackListedNode (jNode) {
    if (jNode.text ().includes ('LiberaQ') ) {
        //jNode.hide ();                             // Hide just the node
        //jNode.closest ("tr").hide ();              // Hide the containing row
        /* Hide the containing row of the containing table
           The .parent() is needed due to a quirk of .closest().
        */
        jNode.closest ("tr").parent ().closest ("tr").hide ();
    }
}

Select 包含基于 CSS 和内容的行

Select containing row based on CSS and content

javascript

jquery

css

greasemonkey

tampermonkey