创建一个书签，如果div包含某些文本，它将隐藏div

Question

I'm looking to create a bookmarklet that will mainly be used on this page: http://forum.sectioneighty.com/find-new/528631/posts

It will search for divs with a class of 'discussionListItem'. 'discussionListItem' is a parent of a div with a class of 'forumLink'. If 'forumLink' contains the string "Music", add 'display: none' to its parent 'discussionListItem'.

So far I've created this, which works:

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

It hides the first div that has a class of 'discussionListItem'.

Building on that I wrote this:

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

This is as far as I've gotten to complete my initial request, but it's not working. I'm not great in Javascript/jQuery so I'm sure there's something I'm missing. I based this code off an answer I found here: If a div contains a specific string of text, edit the parent's css

Also, if there's any easy way to do it, I'd like it to be able to search for multiple strings... so if .forumList contained 'Music' OR 'Sports' OR 'Life', it would change its parent's div to display: none.

Thanks!

Answer 1

I don't think jQuery will be in scope from a bookmarklet. This site will convert your code into a jQuery-able bookmarklet. Your code would look like this:

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

I am able to run this from the console fine, but if you have trouble try that bookmarklet/jQuery converter.

Alternatively, you can just write it in pure javascript, which ought to look very similar. You should be able to run this one as a bookmarklet without any kind of conversion.

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

Answer 2

$('.discussionListItem .forumLink:contains("Music")').parents('.discussionListItem').hide()