javascript - 创建一个书签，如果 div 包含特定文本，该书签将隐藏该 div

Question

我正在创建一个主要用于此页面的书签:http://forum.sectioneighty.com/find-new/528631/posts

它将搜索具有“discussionListItem”类的 div。 'discussionListItem' 是类为 'forumLink' 的 div 的父级。如果“forumLink”包含字符串“Music”，请将“display: none”添加到其父“discussionListItem”。

到目前为止，我已经创建了这个，它有效:

    javascript:(function(){document.getElementsByClassName('discussionListItem')[0].style.setProperty('display', 'none', 'important');})();

它隐藏了第一个具有“discussionListItem”类的 div。

在此基础上我写了这个:

    javascript:(function(){$(".discussionListItem .forumLink a:contains('Music')").closest(".discussionListItem").css("display" , "none");});();

这是我已经完成的最初请求，但它不起作用。我不太擅长 Javascript/jQuery，所以我确信我缺少一些东西。我基于我在这里找到的答案来编写此代码:If a div contains a specific string of text, edit the parent's css

此外，如果有任何简单的方法可以做到这一点，我希望它能够搜索多个字符串...所以如果 .forumList 包含“音乐”或“体育”或“生活”，它会改变要显示的父级 div:无。

谢谢!

Answer 1

我认为 jQuery 不会在小书签的范围内。 This site会将您的代码转换为支持 jQuery 的书签。您的代码将如下所示:

(function(){ 
    var searchArray = ["Music", "Sports", "Life"];
    for(var searchIndex in searchArray)
        $(".discussionListItem:contains("+searchArray[searchIndex]+")").css({"display":"none"});
})();

我可以从控制台正常运行它，但如果您遇到问题，请尝试使用 bookmarklet/jQuery 转换器。

或者，您可以用纯 JavaScript 编写它，这应该看起来非常相似。您应该能够将其作为书签运行，无需任何类型的转换。

(function() {
    var searchArray = ["Music", "Sports", "Life"];
    var elements = Array.prototype.slice.call(document.body.querySelectorAll(".discussionListItem")); 
    for(var searchIndex in searchArray)
        for(var elIndex in elements)
            if(elements[elIndex].innerHTML.indexOf(searchArray[searchIndex])>=0) 
                elements[elIndex].style.display = "none";
})();