Question

所以我有不同数量的表单输入，并且根据应用程序在CMS中的设置方式，它们可以位于不同的“页面”上（只显示/隐藏同一文档中的页面）。这意味着他们的tab-index不一定遵循DOM结构。

他们的形式也各不相同。

我将如何按Tab-index的顺序循环（验证）？

（注意：tab-index并不总是遵循增量模式，因为其中一个show / hide按钮上的'next'按钮也有一个tab-index）

我想过这样的事情：

var $inputs = $('input[type="text"], select, input[type="radio"]'),
numInputs = $inputs.length,
numInputsChecked = 0,
tabIndex = 0;

while(numInputs != numInputsChecked){
  var $input = $inputs.filter(function(){
     return $(this).attr("tabindex") == tabIndex;
  });
  if($input.length){
     // Do validation code
     numInputsChecked++;
  }

  tabIndex++;
}

但我相信应该有更好的方法来完成这项任务。（注意，我实际上没有测试过这段代码，我只是想说明我在想什么）

Answer 1

jQuery选择器默认返回DOM顺序的元素数组。见http://docs.jquery.com/Release%3AjQuery_1.3.2。

但是，您可以通过扩展jQuery的默认选择器来添加自定义选择器行为，请参阅：http://james.padolsey.com/javascript/extending-jquerys-selector-capabilities/，使用类似于this plugin的技术对所选输入数组进行排序。请记住忽略实际重新排列元素的部分。

Answer 2

这种方法可以实现，但可能会有更优雅的方式（我没有花太多时间）：

HTML：

<input type="text" tabindex="2" />
<select tabindex="4"></select>
<input type="text" tabindex="1" />
<input type="text" tabindex="3" />

JS：

/**
 * Sort arrays of objects by their property names
 * @param {String} propName
 * @param {Boolean} descending
 */
Array.prototype.sortByObjectProperty = function(propName, descending){
    return this.sort(function(a, b){
        if (typeof b[propName] == 'number' && typeof a[propName] == 'number') {
            return (descending) ? b[propName] - a[propName] : a[propName] - b[propName];
        } else if (typeof b[propName] == 'string' && typeof a[propName] == 'string') {
            return (descending) ? b[propName] > a[propName] : a[propName] > b[propName];
        } else {
            return this;
        }
    });
};
$(function(){
    var elms = [];
    $('input, select').each(function(){
        elms.push({
            elm: $(this),
            tabindex: parseInt($(this).attr('tabindex'))
        })
    });
    elms.sortByObjectProperty('tabindex');

    for (var i = 0; i < elms.length; i++) {
        var $elm = elms[i].elm;
        console.log($elm.attr('tabindex'));
    }
});

Answer 3

如上所述，排序对象有点无意义;无论如何，你仍然可以使用Array原型。 ...

您的需求是否值得编写所有代码？

“更好的方式”是什么意思？

- ＆GT;选择较少贪心的方法（函数调用，缓存对象等）。

我认为你的代码很好，可能是你可以优化你的代码并获得已检查的输入：

  var $input = $inputs.filter(function(){
       return $(this).attr("tabindex") == tabIndex;
  });
  // Preventing your code from processing this element upon next loop if any.
  $inputs = $inputs.not($input);

但是在处理hudge节点集合时这真的很有意义......

按Tab-index的顺序循环jQuery选择

3 个答案: