Есть ли способ выбрать первый элемент из коллекции типов

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')

Пример

Answer 2

Использование :input и :first.

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

jsFiddle .

Вы должны разделить селектор, иначе он найдет только первый элемент ввода, а не первый из каждого.

Answer 3

Вы можете сделать это так:

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

Проверьте и играйте здесь - http://jsfiddle.net/dhruvasagar/yLnnX/