Tampermonkey 隐藏没有特定文本的元素?
Tampermonkey to Hide elements without specific text?
steam市场上的listing代码是这样的:
<span id="listing_285218391330225741_name" class="market_listing_item_name" style="color: #CF6A32;">StatTrak™ M4A1-S | Cyrex (Minimal Wear)
<span style="color:red">
(warning)
</span>
</span>
使用一些 Steam 增强器插件,它将 <span style="color:red"> (warning) </span>
添加到任何带有名称标签的项目。
由于每个列表都有 spans
,有没有办法使用 javascript (Tampermonkey) 删除任何不包含单词 "warning" 的 span
?
换句话说,只显示带有名称标签的列表。
如果你能保证警告的跨度样式是红色的,你可以做到
var elms = document.querySelectorAll('.market_listing_item_name > span[style="color:red"]');
获取每个警告跨度。然后,通过遍历所有父项并应用样式
来隐藏父项
elms.forEach(function(el){
el.parentElement.style.display = "hidden";
}
总的来说:
- 获取您可能想要删除的所有spans/nodes的列表。
- 过滤掉包含您的特定文本的那些。
- 删除或隐藏剩余内容。
- 注意 AJAX(或插件)计时问题。
您可以使用 jQuery 执行第 1 步到第 3 步,例如:
var itemRows = $(".market_listing_row_link");
var rowsToDelete = itemRows.not (":has(.market_listing_item_name > span:contains('(warning)'))");
rowsToDelete.hide ();
BUT,因为警告是由插件添加的(and/or 某些市场页面可能会通过 AJAX 技术添加),很有可能您的 Tampermonkey 脚本将 运行 在页面完成之前按照您 expect/need 的方式完成。
为了弥补这一点,使用像 waitForKeyElements() 这样的技术,并找到一些条件,使您可以知道您提到的 "plugin" 已经完成了它的工作。
由于您没有提供详细信息,我们假设插件在 window load
事件触发之前完成。
因此,这里是 一个完整的 Tampermonkey 脚本,它在 AJAX 和静态场景中都有效(您可能需要根据此 [=45] 提供额外的延迟=]):
// ==UserScript==
// @name _Steam Market, hide items that DON't have a warning!?
// @include http://YOUR_SERVER.COM/YOUR_PATH/*
// @match *://steamcommunity.com/market*
// @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 work around a design change
introduced in GM/TM 1.0. It restores the sandbox.
*/
window.addEventListener ("load", function () {
waitForKeyElements (".market_listing_row_link", hideUnwarnedRows);
}, false);
function hideUnwarnedRows (jNode) {
if (jNode.has (".market_listing_item_name > span:contains('(warning)')").length) {
return;
}
jNode.hide ();
}
steam市场上的listing代码是这样的:
<span id="listing_285218391330225741_name" class="market_listing_item_name" style="color: #CF6A32;">StatTrak™ M4A1-S | Cyrex (Minimal Wear)
<span style="color:red">
(warning)
</span>
</span>
使用一些 Steam 增强器插件,它将 <span style="color:red"> (warning) </span>
添加到任何带有名称标签的项目。
由于每个列表都有 spans
,有没有办法使用 javascript (Tampermonkey) 删除任何不包含单词 "warning" 的 span
?
换句话说,只显示带有名称标签的列表。
如果你能保证警告的跨度样式是红色的,你可以做到
var elms = document.querySelectorAll('.market_listing_item_name > span[style="color:red"]');
获取每个警告跨度。然后,通过遍历所有父项并应用样式
来隐藏父项elms.forEach(function(el){
el.parentElement.style.display = "hidden";
}
总的来说:
- 获取您可能想要删除的所有spans/nodes的列表。
- 过滤掉包含您的特定文本的那些。
- 删除或隐藏剩余内容。
- 注意 AJAX(或插件)计时问题。
您可以使用 jQuery 执行第 1 步到第 3 步,例如:
var itemRows = $(".market_listing_row_link");
var rowsToDelete = itemRows.not (":has(.market_listing_item_name > span:contains('(warning)'))");
rowsToDelete.hide ();
BUT,因为警告是由插件添加的(and/or 某些市场页面可能会通过 AJAX 技术添加),很有可能您的 Tampermonkey 脚本将 运行 在页面完成之前按照您 expect/need 的方式完成。
为了弥补这一点,使用像 waitForKeyElements() 这样的技术,并找到一些条件,使您可以知道您提到的 "plugin" 已经完成了它的工作。
由于您没有提供详细信息,我们假设插件在 window load
事件触发之前完成。
因此,这里是 一个完整的 Tampermonkey 脚本,它在 AJAX 和静态场景中都有效(您可能需要根据此 [=45] 提供额外的延迟=]):
// ==UserScript==
// @name _Steam Market, hide items that DON't have a warning!?
// @include http://YOUR_SERVER.COM/YOUR_PATH/*
// @match *://steamcommunity.com/market*
// @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 work around a design change
introduced in GM/TM 1.0. It restores the sandbox.
*/
window.addEventListener ("load", function () {
waitForKeyElements (".market_listing_row_link", hideUnwarnedRows);
}, false);
function hideUnwarnedRows (jNode) {
if (jNode.has (".market_listing_item_name > span:contains('(warning)')").length) {
return;
}
jNode.hide ();
}