使用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的用于编辑不同类型的模式对话框记录。他们每个人都有一个定义的标签顺序。根据编辑权限，某些模式中的某些字段将被替换为文本（标签而不是DropDownLists或TextBoxes）。 jQueryUI默认将第一个可聚焦元素聚焦到对话框中的正常行为并不总是适用于我，所以我需要将焦点设置为模态中具有最小制表符索引的元素。

Answer 1

遍历集合，找到这样的最低值和焦点设置到它：

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

另一种方法是：

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()这样做克隆&排序。更容易（如更短），但可能更多的开销，特别是如果有很多领域。

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