Question

我有几个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”类的元素。

谢谢！

Answer 1

试试这个

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

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

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

请注意，如果没有id属性或没有包含类'error'的元素，结果可以是undefined

Answer 2

你可以这样找到它：

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

Answer 3

这应该是你要找的 -

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

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

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

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

由于你有多个不同类型的元素具有相同的类（输入和选择），我还建议指定元素的类型（在这种情况下，输入） -

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

Answer 4

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

Answer 5

试试这个：

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

P.S。作为建议，使用prop()，如果您使用的是jQuery 1.6 +

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

<input blah="hello">

$('input').attr('blah') ：按预期返回'hello'。这里没有意外。
$('input').prop('blah') ：返回undefined - 因为它正在尝试执行[HTMLInputElement].blah - 并且该DOM对象上不存在此类属性。它仅作为该元素的属性存在于范围内，即[HTMLInputElement].getAttribute('blah')

Answer 6

var yourID = document.getElementsByClassName('error')[0].id;

Answer 7

你可以使用

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

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

$('div#%wrapper_id% input').first(function(){
    ...
}

找到类的第一个实例的id

7 个答案: