Select label by nth-of-type

Question

In this markup, I need to replace the label text "E-mail" with "User Name". I only have access via jQuery.

    <div class="foo" style="border:1px solid #444">
          <span class="field-with-fancyplaceholder">
          <label class="placeholder" for="pseudonym_session_unique_id" style="font-size: 13px;">
          <span>Email</span>
          </label>
          <input id="pseudonym_session_unique_id" class="text" type="text" size="30" name="pseudonym_session[unique_id]">
</span>
          <span class="field-with-fancyplaceholder">
          <label class="placeholder" for="pseudonym_session_password" style="font-size: 13px;">
          <span>Password</span>
          </label>
          <input id="pseudonym_session_password" class="text" type="password" size="30" name="pseudonym_session[password]">
          </span>
        </div>

When I try this

$('label:nth-of-type(1)').addClass('bar');  
$('.bar span').text('user name'); 
// because $('label:nth-of-type(1) span') doesn't work 

both labels get selected and both spans say "user name." How can I get just the first one?

Here's the fiddle.

Answer 1

The labels don't have the same parent element, and :nth-of-type is based on siblings (elements with the same parent).

Note: :nth-of-type is not being implemented by jQuery in browsers that don't natively support it, meaning it won't work in IE6 7 or 8.

Answer 2

You can try the :contains selector:

$('.foo label span:contains("Email")').text('user name');