选择一组 CSS 选择器中的第一个元素答案

【问题标题】：Select the first element in a set of CSS selectors选择一组 CSS 选择器中的第一个元素
【发布时间】：2015-06-04 03:12:02
【问题描述】：

在我正在进行的一个项目中，我们要为用户设置的约定之一是，当我们打开一个模态框时，我们会自动聚焦打开的模态框的第一个可以接受输入的元素（或者输入或下拉菜单。）执行此操作的 jQuery 代码是 easy:

$firstElement.focus();

问题在于获取第一个元素。

我们应用程序的模态有时以inputs 开头（例如文本、复选框、日期等），但有时以selects 开头（例如下拉菜单。）因此，获取$firstElement 有点挑战性，因为我需要执行类似以下伪代码的选择：

(input, select):first

但是，根据我对 CSS 选择器的了解，我能得到的最接近的是：

input:first, select:first

问题：使用 CSS 选择器，我可以通过什么方式选择一组输入和选择的第一个元素？或者，我是否需要更复杂的 JavaScript 实现来执行我正在尝试做的“焦点优先输入”？

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

试试这个：

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

附录：

如果您使用隐藏的inputs，也有办法解决这个问题：

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

【讨论】：

【解决方案2】：

您可以使用$.fn.first()

将匹配元素的集合减少到集合中的第一个。

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

【讨论】：

【解决方案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];

这是我用于在模态中保持焦点的代码的一部分。希望对您有所帮助。

【讨论】：