按类型选择标签答案

【问题标题】：Select label by nth-of-type按类型选择标签
【发布时间】：2012-08-14 04:15:23
【问题描述】：

在此标记中，我需要将标签文本“电子邮件”替换为“用户名”。我只能通过 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>

当我尝试这个时

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

两个标签都被选中，两个跨度都说“用户名”。我怎样才能得到第一个？

Here's the fiddle.

【问题讨论】：

小心，因为 jQuery 实际上不支持:nth-of-type()，请参阅stackoverflow.com/questions/11745274/… 和stackoverflow.com/questions/2093355/… 虽然它适用于您的情况，但它只是因为 jQuery 让浏览器处理选择。并不是说这与问题本身有任何关系，只是想我会提到它。

标签： jquery css jquery-selectors

【解决方案1】：

标签没有相同的父元素，:nth-of-type 是基于兄弟姐妹（具有相同父元素的元素）。

注意：:nth-of-type 没有在原生不支持它的浏览器中由 jQuery 实现，这意味着它在 IE6 7 或 8 中不起作用。

【讨论】：

【解决方案2】：

你可以试试:contains选择器：

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

【讨论】：

【解决方案3】：

您可以通过更具体的属性更可靠地选择正确的元素：

$("[for=pseudonym_session_unique_id] > span").text("user name");

【讨论】：

【解决方案4】：

使用:eq。

$('label:eq(0) span').text('user name');

Fiddle.

【讨论】：