Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I've added a custom JavaScript file to my header via functions.php and the file is linked fine when I check the source code (listed well below the main call to jQuery). Within the custom JavaScript file I have added the following:

    $('li.bawmrp_manual > a:contains[href*="/project/"]').addClass('bawmrp_gallery');

I've tried numerous variations. What I'm trying to do is add the class bawmrp_gallery to the <li> if the link within it contains the text project. Can anyone help?

share|improve this question

put on hold as off-topic by Pieter Goosen, G. M., Johannes Pille, toscho 18 hours ago

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

Did you read this? –  toscho Feb 3 '13 at 20:05
I didn't read that thread but I did see reference to the $ issue. I guess if I change the first line to jQuery(document).ready(function($){ and the second line to the suggestion by @Kevin that may be a solution. I'll give it a try. Thank you. –  Paul Brown Feb 3 '13 at 20:19
I did try that edit previously actually on the off chance so if there were multiple errors in my code I guess this will have solved part of it... if I implemented it correctly. Thank you. –  Paul Brown Feb 3 '13 at 20:37
So, jQuery works, and it is just about the correct selector? –  toscho Feb 3 '13 at 20:42
@toscho yes it must be a code issue. I tested JQuery and the link to my new besoke JS page by adding an alert and it all works fine (now deleted). –  Paul Brown Feb 3 '13 at 20:50

2 Answers 2

This should do the trick, but it is untested.


Edit: This selector does the job, if your code is structured the way I assumed it is; however, if your HTML is different the selector may need to be adjusted. See this fiddle.

share|improve this answer
Thank you both @Kevin @Toscho - I've combined both links / suggestions (I think) and arrived at jQuery(document).ready(function($){ $('li.bawmrp_manual').find('a[href*="/project/"]').addClass('bawmrp_gallery'); }); but it still doesn't add the additional class at the moment. –  Paul Brown Feb 3 '13 at 20:27
@Toscho / Kevin I referred to JQuery help and have some alternative code although I think the issue actually as that as the links are added by a related posts plug-in they are added after the JQuery code has run. I guess I need to find a way to run the code after the page has fully rendered? I'll do some research but is this an issue you've encountered before? –  Paul Brown Feb 4 '13 at 15:58

Just to update this is the solution that worked for me...

    jQuery('li.bawmrp_manual a[href*="\\/project\\/"]').parent().addClass('bawmrp_gallery');

I had to define 'bawmrp_gallery' in my custom css before it would appear though. I also decided to use (window).load because the content is added dynamically via a plug-in and I wanted to do my best to ensure the page was fully loaded so that the JQuery didn't run before the content was added.

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.