5

我有几个input......有些有课程，有些没有。类是任意分配的（.error在提交失败的表单上使用“”，给您一个想法）。

如何找到该类出现的第一个实例的 id？

例如：

<input id="firstName" type="text" name="firstName" class="text" value="" />
<input id="lastName" type="text" name="lastName" class="text error" value="" />
<input id="email" type="text" name="email" class="text" value="" />
<select name="gender" class="error">
    <option value=""></option>
    <option value="male">Male</option>
    <option value="female">Female</option>                          
</select>

您会注意到，标签上还有一个error类。select因此，在这种特殊情况下，我需要找到 id “lastName”，因为这是第一次出现带有类“error”的元素。

谢谢！

4

7 回答 7

3

试试这个

$('.error').first().attr('id')

如其他答案所述，使用 css 选择器:first：

$('.error:first').attr('id')

请记住，undefined如果没有 id 属性或没有包含类“错误”的元素，则结果可能是

于 2012-12-17T12:12:48.267 回答
2

你可以这样找到它：

 $('.error:first').attr('id');
于 2012-12-17T12:14:28.937 回答
2

这应该是您正在寻找的 -

var className = 'error';
$('.' + className + ':first').attr('id');

我正在使用:first选择器和.attr()函数。

  • :first- 选择第一个匹配的元素。
  • .attr()- 获取匹配元素集中第一个元素的属性值。

查看attr()函数的定义，您甚至可能不需要指定:first. 但是，我发现使用选择器尽可能详细总是更好。这也提高了可读性。

由于您有多个具有相同类的不同类型的元素（输入和选择），我还建议指定元素的类型（在本例中为输入） -

$('input.error:first').attr('id');
于 2012-12-17T12:14:34.933 回答
1

$('.error').first();将返回具有类错误的第一个元素。

于 2012-12-17T12:14:04.043 回答
1

试试这个：

$(".error:first").prop('id');

PS作为建议，prop()如果您使用的是 jQuery 1.6+，请使用

.attr查看和之间区别的最简单方法.prop是以下示例：

<input blah="hello">
  1. $('input').attr('blah')：'hello'按预期返回。这里没有惊喜。
  2. $('input').prop('blah'): 返回undefined——因为它正在尝试这样做[HTMLInputElement].blah——并且该 DOM 对象上不存在这样的属性。它仅作为该元素的属性存在于范围内，即[HTMLInputElement].getAttribute('blah')
于 2012-12-17T12:17:59.877 回答
0 
var yourID = document.getElementsByClassName('error')[0].id;
于 2012-12-17T12:12:58.657 回答
-1

您可以使用

$('input').first(function(){
    $(this).attr(id);
});

但这适用于所有输入，我建议您将它们包装在 div 中并编写

$('div#%wrapper_id% input').first(function(){
    ...
}
于 2012-12-17T12:15:39.940 回答