使用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();