Change <span> text on document load with jQuery

Question

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>

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/"&gt;&lt;strong&gt;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"); 
});
});

Answer 1

Try this (assumes nav is the id of the ul for your menu system):

$(document).ready(function() {
    $("#nav li span:contains('Text text text')")
      .css("color", "#123456"); 
});

For your example this jsFiddle works:

Answer 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.