EDIT: Solution at bottom of post.
I've got a custom GreaseMonkey script I made that uses JQuery to filter out and modify certain feed items in my Facebook news feed. It's been working great, but this particular one isn't working properly:
$("h6.uiStreamHeadline:contains('shared') a[id^='js_']").html("someone else");
What this is supposed to do is replace the name of the page from which a particular item is being shared on my news feed. For example, when it says "John Smith shared Funny-Pictures-For-Everyone's photo", this function turns it into "John Smith shared someone else's photo".
Here are some of my other "filters":
$("h6.uiStreamHeadline:contains('was tagged in')").closest("li").html("<li><i style='color:#CCCCCC;margin-left:15px;'>Post Hidden (someone tagged somewhere else)</i></li>");
$("h6.uiStreamHeadline:contains('were tagged in')").closest("li").html("<li><i style='color:#CCCCCC;margin-left:15px;'>Post Hidden (multiple friends tagged somewhere else)</i></li>");
$("h6.uiStreamHeadline:contains('commented on her own')").closest("li").html("<li><i style='color:#CCCCCC;margin-left:15px;'>Post Hidden (someone commented on their own stuff)</i></li>");
$("h6.uiStreamHeadline:contains('commented on his own')").closest("li").html("<li><i style='color:#CCCCCC;margin-left:15px;'>Post Hidden (someone commented on their own stuff)</i></li>");
$("h6.uiStreamHeadline .wallArrowIcon").closest("li").html("<li><i style='color:#CCCCCC;margin-left:15px;'>Post Hidden (Wall-to-Wall post)</i></li>");
$("h6.uiStreamHeadline:contains('commented on a')").closest("li").html("<li><i style='color:#CCCCCC;margin-left:15px;'>Post Hidden (people commenting on something i probably don't care about)</i></li>");
These all work just fine and make their replacements when the page loads. However, the function in question does not update until I interact with it. For example, if the name on the page is "Funny-Pictures-For-Everyone", after I put my mouse over it and Facebook's little popup thing appears, then the name will change to "someone else". I don't know why it won't change when the page loads. I wonder if it's a timing issue, but I'm not sure what to do about it, and I'm not sure why all the rest would work.
I do understand that the function in question is a bit different from most of the rest. The rest of them replace the entire post using closest("li") and the one I'm having trouble with is only meant to replace the inner HTML or text within the <a></a> tags it is selecting.
Thanks in advance for any help.
I've come up with what seems to be a working solution to this issue:
As Brock Adams mentioned below, the ID attribute I was trying to select doesn't exist in the element until I interact with it. So, I had to find something that was there on page load. I examined the inner HTML of the and discovered that the one element that I wanted to select was the only one that did NOT have a 'class' attribute, either before OR after interacting with it. Therefore, I've come up with the following that seems to work just fine:
$("h6.uiStreamHeadline:contains('shared') a:not([class])").html("someone else");
I <3 JQuery XD
The problem is that Facebook doesn't assign an id (and a bunch of other crud) to that link until you mouse over it!
The solution: Never use Facebook! Ever!... er, I mean, try a different approach for that filter. Perhaps:
$("h6.uiStreamHeadline:contains('shared') > div.actorName > a").html("someone else");