2

そのため、フォーム入力の量はさまざまであり、CMSでのアプリの設定方法に応じて、異なる「ページ」に配置できます（同じドキュメント内のページを表示/非表示にするだけです）。つまり、それらのタブインデックスは必ずしもDOM構造に準拠しているとは限りません。

また、フォームの種類もさまざまです。

タブインデックスの順序でループ（検証）するにはどうすればよいですか？

（注：表示/非表示ボタンの1つにある[次へ]ボタンにもタブインデックスがあるため、タブインデックスは常に増分パターンに従うとは限りません）

私はこのようなことについて考えました：

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++;
}

しかし、私はこのタスクを達成するためのより良い方法があるはずだと信じています。（注：私は実際にこのコードをテストしていません。私が考えていることを説明しようとしているだけです）

4

3 に答える 3

1

jQueryセレクターは、デフォルトでDOMの順序で要素の配列を返します。http://docs.jquery.com/Release%3AjQuery_1.3.2を参照してください。

ただし、jQueryのデフォルトセレクターを拡張することでカスタムセレクターの動作を追加できます。http：//james.padolsey.com/javascript/extending-jquerys-selector-capabilities/を参照してください。このプラグインと同様の手法を使用して、選択した入力の配列を並べ替えます。。実際に要素を再配置する部分を無視することを忘れないでください。

于 2012-09-13T22:50:03.500 に答える
1

このアプローチはそれを行いますが、よりエレガントな方法があるかもしれません（私はこれにあまり時間をかけませんでした）：

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'));
    }
});
于 2012-09-13T22:56:22.693 に答える
0

すでに述べたように、オブジェクトの並べ替えは意味がありません。とにかく、それでも配列プロトタイプを使用できます。..。

あなたのニーズはそのすべてのコードを書く価値がありますか？

「より良い方法」とはどういう意味ですか？

->欲張りでない方法を選択します（関数呼び出し、オブジェクトのキャッシュなど）。

私はあなたのコードは大丈夫だと思います、あなたはあなたのコードを最適化してチェックされた入力を乗り越えることができるかもしれません：

  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);

しかし、これはハッジノードコレクションの処理中には本当に意味があります...

于 2012-09-13T23:37:52.427 に答える