Блог

Мне нужно использовать 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();
  

Контекст заключается в том, что у меня есть веб-приложение (ASP.NET ) с участием нескольких различных модальных диалоговых окон jQueryUI, используемых для редактирования различных типов записей. Каждый из них имеет определенный порядок табуляции. В зависимости от разрешений на редактирование некоторые поля в некоторых модальностях заменяются текстом (метки вместо выпадающих списков или текстовых полей). Обычное поведение jQueryUI по умолчанию для фокусировки первого фокусируемого элемента в диалоговом окне не всегда работает для меня, поэтому мне нужно установить фокус на элемент в модальном с минимальным индексом табуляции.

Выполните итерацию по коллекции, найдите наименьшее значение и установите на него фокус следующим образом:

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

Альтернативным подходом было бы клонирование и сортировка. Проще (например, короче), но потенциально больше накладных расходов, особенно если полей много.

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