Select The First Element In A Set Of Css Selectors

On a project I'm working on, one of the conventions we want to set up for our users, is that when we open a modal, we automatically focus the first element of the opened modal that

Solution 1:

Try this:

var $firstElement = $("input, select, textarea").first();

---

Addendum:

In case you're using hidden inputs, there's a way around that as well:

var $firstElement = $("input, select, textarea").filter(':visible:first');

Solution 2:

You can use $.fn.first()

Reduce the set of matched elements to the first in the set.

$('input, select').first().focus();

Solution 3:

var tabbableElements  = 'a[href], area[href], input:not([type="radio"]):not([disabled]),' +
                                'input[type="radio"]:checked:not([disabled]),' +
                                'select:not([disabled]), textarea:not([disabled]),' +
                                'button:not([disabled]), iframe, object, embed, *[tabindex],' +
                                '*[contenteditable]';
var$allTabbableElements = $(context).find(tabbableElements).filter(':visible');
var firstTabbableElement = $allTabbableElements.first()[0];

This is part of a code i use for keeping focus within a modal. Hope it helps.