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

Question

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

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

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

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模态对话框，用于编辑不同类型的记录。每个选项卡都有一个已定义的选项卡顺序。根据编辑权限，一些模态上的一些字段被替换为文本(标签而不是下拉列表或文本框)。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

另一种方法是克隆&排序。更容易(因为更短)，但潜在的开销更大，特别是在有许多字段的情况下。

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