Response title
This is preview!
Move this topic
Jquery addClass to containing li based on a href contents
in Using jQuery
•
10 years ago
Hi, I've tried various snippets of code to try to get this working on my Wordpress site but without success. I have a structure:
<div class...>
<ul>
<li class...><a href... </li>
<li class...><a href... </li>
<li class...><a href... </li>
</ul>
</div>
I am trying to add an additional class to the containing li if the a href contain '/project/' somewhere within it.
This is the code I have tried + various other permutations without success. The JQuery is in a linked js file which I know is linked correctly as I have checked via a simple alert:
- jQuery(document).ready(function($){
- $('li.bawmrp_manual').find('a[href*="/project/"]').addClass('bawmrp_gallery');
- })
Can anyone assist?
1
Replies(20)
Thank you but the class still isn't being added. The a hrefs are generated by a plug-in and are dynamic - is it possible the JS code is running before the plug-in has created the elements? If so how could I delay running the script until the entire page is fully loaded? I guess amending this line?...
jQuery(document).ready(function($){
Leave a comment on rminde's reply
Or try this:
JS:
- jQuery(document).ready(function($){
- $('li.bawmrp_manual').find('a[href*="/project/"]').parent().addClass('bawmrp_gallery');
- })
HTML:
- <div>
- <ul>
- <li class="bawmrp_manual"><a href="/main/">one</a></li>
- <li class="bawmrp_manual"><a href="/project/">two</a></li>
- <li class="bawmrp_manual"><a href="/contact/">three</a></li>
- </ul>
- </div>
CSS:
- .bawmrp_gallery a {color: red;}
Przemek
Thank you but the class still isn't being added. The a hrefs are generated by a plug-in and are dynamic - is it possible the JS code is running before the plug-in has created the elements? If so how could I delay running the script until the entire page is fully loaded? I guess amending this line?...
jQuery(document).ready(function($){
Leave a comment on Przemek's reply
If the li elements ( and the anchor tags) are generated dynamically, YES, the code to add the class is DEFINITELY running before the plugin has created the elements.
How could you delay the script until the elements are created? Most likely the plugin provides for that; it may have a method such as 'onComplete:function( ... ) { .... }' - if it has use that. If you can tell from the plugin when it completes adding the elements, arrange to run the code after the elements are added.
Without knowing or seeing the plugin you are using, it is hard to give you a precise answer.
Thank you - I'll do some research on the plug-in. I am quite happy for the script to run after the page has rendered even - I guess there must be a way to do that in JQuery if I can't track anything down in the plug-in. Just exploring all options :)
Leave a comment on Godsbest's reply
Sure by all means - thank you. This is an example of a post - http://skipology.com/iphoneography-workflow-hydrangea/ - the related posts appear as thumbnails towards the bottom. I basically want to format <li> tags differently if they have '/project/' in the URL which is why I would like to add a class. The plug-in generating the code is a manual related posts plugin http://wordpress.org/extend/plugins/baw-manual-related-posts/ The link to my bespoke JS file is inserted into the head via functions.php - I really don't want to edit theme or plug-in files to future proof re upgrades (not that I'm a coder).
Leave a comment on rminde's reply
If this is a Wordpress (php) plugin you are talking about, the code/strategy provided above should work but I do see that there is an error thrown by the same code:
jQuery(window).load(function($){
$('li.bawmrp_manual a[href*="/project/"]').addClass('bawmrp_gallery');
Uncaught TypeError: object is not a function
Uncaught TypeError: object is not a function});
Haha thank you :) Something else for me to look at. What did you use to identify the error out of interest?
For this you can use Web Inspector (Safari & Chrome) or Firebug (Firefox), the Console tab usually shows you any errors or warnings in your code. And if you use any debugging statements such as console.log( $('li') ), the output would also show in the console. These developer tools are very helpful.
Leave a comment on Godsbest's reply
Can you replace the above code with the following and let us know what you see in the alert:
- jQuery(window).load(function() {
- alert( jQuery('li.bawmrp_manual a[href*="\\/project\\/"]').length );
- });
Yes - on a page with none of the <li> tags at all it returns 0 and on a page where there is one appropriate <li> tag out of 4 <li> tags it should be checking it returns 1. Sounds right I guess?
Leave a comment on Godsbest's reply
That's a very good sign. Please now use the following code and let us know what you see. Do you have the class 'bawmrp_gallery'?
- jQuery(window).load(function(){
- jQuery('li.bawmrp_manual a[href*="\\/project\\/"]').parent().addClass('bawmrp_gallery');
- });
So frustrating! I can see where you are going with the test / code but no! I tried Incognito to ensure no Cache issue but nothing. This is the code returned...
- <div class="bawmrp">
- <h3>You may also like:</h3>
- <ul>
- <li style="float:left;width:120px;height:180px;overflow:hidden;list-style:none;border-right: 1px solid #ccc;text-align:center;padding:0px 5px;" class="bawmrp_manual"><a href="http://skipology.com/iphoneography-workflow-rose/"><img width="100" height="100" src="http://skipology.com/wp-content/uploads/2013/01/rose-final-100x100.jpg" class="attachment-100x100 wp-post-image" alt="iPhoneography - rose" /><br />iPhoneography workflow { rose }</a></li>
- <li style="float:left;width:120px;height:180px;overflow:hidden;list-style:none;border-right: 1px solid #ccc;text-align:center;padding:0px 5px;" class="bawmrp_manual"><a href="http://skipology.com/iphoneography-workflow-old-clematis/"><img width="100" height="100" src="http://skipology.com/wp-content/uploads/2013/01/old-clematis-final-100x100.jpg" class="attachment-100x100 wp-post-image" alt="iPhoneography - old clematis" /><br />iPhoneography workflow { old clematis }</a></li>
- <li style="float:left;width:120px;height:180px;overflow:hidden;list-style:none;border-right: 1px solid #ccc;text-align:center;padding:0px 5px;" class="bawmrp_manual"><a href="http://skipology.com/iphoneography-workflow-searching-for-light/"><img width="100" height="100" src="http://skipology.com/wp-content/uploads/2013/01/searching-for-light-100x100.jpg" class="attachment-100x100 wp-post-image" alt="iPhoneography - Searching for Light" /><br />iPhoneography workflow { searching for light }</a></li>
- <li style="float:left;width:120px;height:180px;overflow:hidden;list-style:none;border-right: 1px solid #ccc;text-align:center;padding:0px 5px;" class="bawmrp_manual"><a href="http://skipology.com/project/iphoneography-floral-series/"><img width="100" height="100" src="http://skipology.com/wp-content/uploads/2013/01/lavender-100x100.jpg" class="attachment-100x100 wp-post-image" alt="{ lav.en.der }" /><br />iPhoneography { floral series }</a></li>
- </ul>
- </div>
- <div style="clear:both;"></div>
Leave a comment on Godsbest's reply
The code in my previous post should work fine. May be I am missing something; I don't see any problem with them markup. As long as the css class bawmrp_gallery is defined, the appropriate li elements should have it added to them as follows:
- jQuery('li.bawmrp_manual a[href*="\\/project\\/"]').parent().addClass('bawmrp_gallery');
- <li style="float:left;width:120px;height:180px;overflow:hidden;list-style:none;border-right: 1px solid #ccc;text-align:center;padding:0px 5px;" class="bawmrp_manual bawmrp_gallery">
- <a href="http://skipology.com/project/iphoneography-floral-series/">
- <img width="100" height="100" src="http://skipology.com/wp-content/uploads/2013/01/lavender-100x100.jpg" class="attachment-100x100 wp-post-image" alt="{ lav.en.der }"><br>iPhoneography { floral series }
- </a>
- </li>
However, even with the class added, the li element does not look any different from the others.
Oh hang on. Maybe I'm missing something here? You say 'As long as the css class bawmrp_gallery is defined' ... I haven't as yet added the class 'bawmrp_gallery' to my bespoke CSS in Wordpress Admin to style it because I was waiting for it to appear in the source code. Is this the problem - should I have 'created' the class first? is that what you mean by 'As long as the css class bawmrp_gallery is defined'?
Leave a comment on Godsbest's reply
Just so you know the error pointed out earlier was due to the presence of '$'; using jQuery seems to work fine. For example if you use the following there will be an error:
- jQuery(window).load(function() {
- alert( $('li.bawmrp_manual a[href*="\\/project\\/"]').length );
- });
Leave a comment on Godsbest's reply
Thank you for your help - the code works now that I added the class in my custom CSS! Really grateful for your help.
Leave a comment on skip155's reply
Great!! Glad I could be of help 
It was really helpful that you provided all the information we need to troubleshoot the issue. That was you contributed a great deal to the solution.
Leave a comment on Godsbest's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to skip155's question
{"z24478574":[14737000003941845],"z5845604":[14737000003944411,14737000003944521],"z8483411":[14737000003943302,14737000003943332,14737000003943418,14737000003943334,14737000003943336,14737000003943338,14737000003943340,14737000003943362],"z5733792":[14737000003943281,14737000003944439,14737000003944443,14737000003944519,14737000003944523,14737000003944525,14737000003944527,14737000003944539,14737000003944541,14737000003944543]}