Tell me more ×
WordPress Answers is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.
up vote 0 down vote favorite

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:

$(document).ready(function(){
    $('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
Did you read this? – toscho♦ Feb 3 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 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 at 20:37
So, jQuery works, and it is just about the correct selector? – toscho♦ Feb 3 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 at 20:50

2 Answers

up vote 0 down vote

This should do the trick, but it is untested.

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

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 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 at 15:58
up vote 0 down vote

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

jQuery(window).load(function(){
    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

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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