Question

我需要使用jQuery将焦点设置为具有指定属性的最小值的元素。例如，在此标记中：

<input type='text' data-myAttr='5' />
<input type='text' data-myAttr='3' />

我想将焦点设置为第二个输入。它可以在页面上IEnumerable<T>个元素的C＃中表示，如下所示：

List<DomElement> elements; //Assume this is full of page elements
DomElement minElement = elements.OrderBy(e => e.attr("data-myAttr")).First();
minElement.Focus();

上下文是我有一个Web应用程序（ASP.NET），涉及用于编辑不同类型记录的几个不同的jQueryUI模式对话框。每个都有一个定义的Tab键顺序。根据编辑权限，某些模态上的某些字段将替换为文本（标签而不是DropDownLists或TextBoxes）。 jQueryUI默认将第一个可聚焦元素聚焦到对话框中的正常行为对我来说并不总是有效，所以我需要将焦点设置为具有最小制表符索引的模态中的元素。

Answer 1

迭代集合，找到最低值并将焦点设置为：

function setDialogFocus() {
    var minValue;
    var minItem;
    $("input[type='text']").each(function() {
        var val = parseInt($(this).attr("data-myAttr"), 10);
        if (val && (!minItem || val < minValue)) {
            minItem = this;
            minValue = val;
        }
    });

    if (minItem) {
        $(minItem).focus();
    }
}

也可以使用.map()这样做：

function setDialogFocus() {
    // get an array of all data attributes and their corresponding objects
    var map = $("input[type='text']").map(function() {
        var val = parseInt($(this).attr("data-myAttr"), 10);
        if (val) {
            return ({obj: this, value: val});
        }
    }).get();
    // sort by value to find the lowest value
    map.sort(function(a, b) {return a.value - b.value;});
    if (map.length > 0) {
        $(map[0].obj).focus();
    }
}

Answer 2

另一种方法是克隆＆amp;分类。更容易（如更短），但可能更多开销，特别是如果有很多字段。

var firstField = $('input[data-myAttr]').clone().sort(function(a, b) {
  return parseInt($(a).attr('data-myAttr')) - parseInt($(b).attr('data-myAttr'));
}).first();

使用jQuery选择具有指定属性的最小值的元素

2 个答案: