Change <span> text on document load with jQuery

4 Views

I’m working on a WordPress site that uses a dynamically generated menu system which I can’t modify becauase of future updates, but what I’d like to do is be able to change the style of the text within one <span> in that menu with jQuery on document ready. The span is nested as an <li> item, and I don’t if that makes a difference. (And I don’t see WordPress making a difference, either.) There are other <span>'s and I don’t want them to change, so I need to match the specific text within the <span> I want to change.

So how could I change this <span>We are here to help.</span>

Read More

to this

<span style="color:#123456;">We are here to help.</span>

on $(document).ready ?

The full html is

<ul id="nav"><li class="li_item"><a class="navlink" href="http://www.mysite.org/contact-us/"><strong>Contact Us</strong><span>We are here to help.</span></a></li></ul>

Update: This works; need to wrap the function in an alias for no conflicts: 

jQuery(function($) {
$(document).ready(function() {
$("#nav li span:contains('We are here to help.')")
.css("color", "#f8481c"); 
});
});
Post Views: 4

Related posts

Leave a Reply

2 comments

  2. This should work if the :contains isn’t working for you.

    $(function() {
  $('#nav li span').each(function() {
    if ($(this).text() === 'We are here to help.')
      $(this).css('color', '#123456');
  });
});

    Edit: too many parentheses.