Question

我想知道是否有办法使用jQuery（以链接方式）来选择以下内容：

<div class="panel">
    <input id="first" type="text" />
    <input id="second" type="text" />
</div>

<div class="panel">
    <h2>Panel title</h2>
    <textarea id="third"></textarea>
    <input id="fourth" type="text" />
</div>

<div class="panel">
    <p>Some paragraph</p>
    <select id="fifth"></select>
    <input id="sixth" type="text" />
</div>

我想选择每个input中存在的第一个表单元素（即select / textarea / div.panel）。

因此，在上面的示例中，我的jQuery选择器将返回三个元素的集合：input#first，textarea#third和select#fifth。

以下循环将为我提供我所追求的结果，但是肯定有一种更清晰的方法可以一次性完成这个jQuery的工作吗？

var firstFormFieldList = [];

$('.panel').each(function(i, el){
   var firstEl = $(el).find('input,select,textarea').filter(':first');
   firstFormFieldList.push(firstEl);
});

Answer 1

您正在寻找:input选择器（DOCS）：

$('.panel').find(':input:first')

Example

Answer 2

使用:input和:first。

$('.panel').find(':input:first')

jsFiddle

你必须拆分选择器，否则它只会找到第一个输入元素，而不是第一个输入元素。

Answer 3

你可以这样做：

$('.panel').each(function(){
    alert($(this).children(':input').first().attr('id'));
});

检查＆amp;在这里玩 - http://jsfiddle.net/dhruvasagar/yLnnX/

有没有办法从类型集合中选择第一个元素

3 个答案: