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>

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

所以在上面的例子中,我的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);
});

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

Example