Finding the first custom item of any type in a div

Question

I have a requirement in Javascript (using Prototype) to focus the cursor on the first form element in a specific div.

A simple example:

<form id="theForm">
  <div id="part1">
    <input id="aaa" .../>
    <select id="bbb">...</select>
  </div>
  <div id="part2">
    <select id="ccc">...</select>
    <input id="ddd" .../>
  </div>
</form>

I want to write a Javascript function that takes the name of a div inside a form and focuses the cursor on the first element in that div - for example.

focusOnFirst('part1'); // will put focus on input "aaa"
focusOnFirst('part2'); // will put focus on select "ccc"

I thought I could use a prototype selection method, for example:

$(pDiv).select('input','select',...etc.);

However, this returns an array containing all the inputs, followed by all selected ones, etc. It does not return elements in the order in which they appear in the div. In my example above, this leads to focusing on typing "ddd" rather than choosing "ccc".

Another possibility is the getElements method of the form:

$('theForm').getElements();

, , div. , , - , - div. , , .

- ?

Answer 1

CSS3:

$$('#theForm input:first-of-type')[0].focus()

, , , .

.

- Edit OK, , select.

- - name ( , - ):

function focusOnFirst2(divName) {
    $$('#' + divName + ' [name]')[0].focus();
}

, , .

- :)

, div, . , 100 IE 45%, . :

function focusFirstItem (divId)
{
    if ($(divId))
    {
        var elems = $('myForm').getElements();
        var elems2 = $(divId).select('*');
        for (i=0, l=elems2.length; i<l; ++i) {
            var item = elems2[i];
            if (item.id && !item.disabled && !item.readOnly && item.visible) {
                if (elems.find(function(s){return s.id = item.id}))
                item.focus();
                break;
            }
        }
    }
}

.

Answer 2

, :

focusFirstItem (divId)
{
    if ($(divId))
    {
        var elems = $('myForm').getElements();
        for (i=0, l=elems.length; i<l; ++i) {
            var item = $(elems[i]);
            if (!item.disabled && !item.readOnly && item.visible) {
                if (item.ancestors().find(function(s){return s.id == divId})) {
                    $(item).focus();
                    break;
                }
            }
        }
    }
}

, . IE6 , , 70 FF. , "", Prototype, .