javascript - 厌倦了 Medium.com 的优质内容。我可以隐藏针对具有特定类的元素的父元素的高级帖子吗?

标签 javascript css

我发现在所有 Premium 帖子中,他们都使用带有 class ="svgIcon-use" 的元素

<svg class="svgIcon-use" width="15" height="15" viewBox="0 0 15 15" style=""><path d="M7.438 2.324c.034-.099.09-.099.123 0l1.2 3.53a.29.29 0 0 0 .26.19h3.884c.11 0 .127.049.038.111L9.8 8.327a.271.271 0 0 0-.099.291l1.2 3.53c.034.1-.011.131-.098.069l-3.142-2.18a.303.303 0 0 0-.32 0l-3.145 2.182c-.087.06-.132.03-.099-.068l1.2-3.53a.271.271 0 0 0-.098-.292L2.056 6.146c-.087-.06-.071-.112.038-.112h3.884a.29.29 0 0 0 .26-.19l1.2-3.52z"></path></svg>

是否可以定位和隐藏帖子容器...

<article class="extremePostPreview u-marginBottom48 uiScale uiScale-ui--small uiScale-caption--small"></article>

如果<svg class="svgIcon-use"> child 身上有没有?

最佳答案

在浏览 Medium 页面时,将以下代码复制并粘贴到您的控制台中。解决方案是在纯 javaScript 中。它将隐藏所有高级文章:

var premiumShit = document.body.querySelectorAll(".streamItem");
for(var counter = 0; counter < premiumShit.length; counter++){
    if(premiumShit[counter].innerHTML.includes("M7.438 2.324c.034-.099.09-.099.123 0l1.2 3.53a.29.29 0 0 0 .26.19h3.884c.11 0 .127.049.038.111L9.8 8.327a.271.271 0 0 0-.099.291l1.2 3.53c.034.1-.011.131-.098.069l-3.142-2.18a.303.303 0 0 0-.32 0l-3.145 2.182c-.087.06-.132.03-.099-.068l1.2-3.53a.271.271 0 0 0-.098-.292L2.056 6.146c-.087-.06-.071-.112.038-.112h3.884a.29.29 0 0 0 .26-.19l1.2-3.52z")){
        premiumShit[counter].style.opacity = "0"; premiumShit[counter].style.height = "0"
    }
}

这个想法是它遍历每个文章元素。如果它在文章的 innerHTML 中发现充满数字的长字符串(这是您告诉我们的 SVG 星形元素的路径),它将将该元素的不透明度设置为 0,并将其高度设置为 0(不要使用“display:none”,因为当您使用它时页面会加载更多文章;相反,请使用不透明度和高度)

我知道这个解决方案是一个肮脏的解决方案,但是嘿:这是唯一一个无论 SVG 有多少父级都有效的解决方案,而且它不需要 jQuery。总而言之,这是一个永远有效的解决方案。

编辑:不幸的是,如果您向下滚动页面,将不会加载新文章,因此每次您想要查看更多文章时都必须重新加载页面(并再次复制粘贴代码在 JavaScript 控制台中,但它已经在 J​​avaScript 控制台的内存中,因此您只需点击一次键盘上的向上箭头键即可)

关于javascript - 厌倦了 Medium.com 的优质内容。我可以隐藏针对具有特定类的元素的父元素的高级帖子吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52209646/

相关文章:

基于先前值的 Javascript 过滤器

javascript - 如何使用 javascript 验证我的下拉列表

javascript - 在 map 上将纬度/经度坐标数组组合在一起

jQuery slideToggle() 在 Chrome/Safari 中的特殊行为

html - 将 div 元素堆叠在一起

javascript - 取消 Angular mddialog 后传递的值仍在编辑

javascript - React Context vs React Redux,我应该什么时候使用它们?

可变尺寸的CSS中心裁剪图像

css - Shiny R 不读取自定义 CSS 文件

css - 如何使用 style 属性在 php 中加载来自不同网站的按钮背景图像?