0

コンテナー内に要素の固定セット (30 など) があります。要素がクリックされたときに、そのコンテナ内のインデックスを把握したいと考えています。

私ができることを知っている：

  1. すべての要素にそれぞれのインデックスを持つクリックハンドラーを設定して、クリックされたときにクロージャースコープからのインデックスを既に知っているようにし
    ます
    。

  2. すべての子要素を反復し、各要素をクリックした要素と比較し、それに到達するまでインデックスをカウントします
    長所: 動作
    します 短所: リストを反復して比較を行う必要があります (遅い)

  3. （SOで提案）previousSibling属性を使用して、途中で各子をnullに戻してインデックスを決定します
    長所：機能します。子から直接開始するため、オプション2よりも少し優れている可能性があります
    短所：要素を繰り返し処理します
  4. （私が考えた解決策）固定セットがあるため、各要素に「tabindex」属性を（htmlまたはJS経由で）設定できるため、要素をクリックすると、要素のtabindex属性を確認するだけです
    長所：ちょうどあるべきですオプション1と同じくらい速い
    短所：（意図したとおりにtabindexを使用していないと怒鳴られる前に:]）これにより、必要な場合とそうでない場合がある要素がフォーカス可能になります

では、パフォーマンス (速度とメモリ) に関して、上記のどれが最良の方法でしょうか、それともより良い方法がありますか?

どうもありがとうございました。

4

2 に答える 2

0

上記のすべてよりも優れたオプション 5 - インデックスをdata-index属性としてノードに保存し、それをイベント ハンドラーで取得します。

すべてのノードにイベント ハンドラーを登録するのではなく、コンテナーに登録してから "イベント バブリング" を使用できます。クリック イベントは子で処理されないため、DOM を介してノードの親にバブル アップし、event.target最初にイベントを受け取ったノードを見つけるために使用できます。

var container = ... // your container;

container.addEventListener('click', function(ev) {
    var target = ev.target;    // which child was actually clicked
    var index = target.getAttribute('data-index');
    ...
}, false);

新しいブラウザでは、呼び出しtarget.dataset.indexの代わりに使用できます。getAttribute

于 2013-03-15T15:11:41.597 に答える
0

すべての IE ブラウザでsourceIndexを使用し、他のブラウザでpreviousElementSiblingを使用できます。

sourceIndex を使用するのが最も簡単で最速ですが、IE のみです。

DOM ノードを変更できる場合、属性 data-index を設定することは適切な解決策ではありません。

previousElementSibling と previousSibling はそれほど遅くはありません。

function getChildrenIndex(ele){
    //IE is simplest and fastest
    if(ele.sourceIndex){
        return ele.sourceIndex - ele.parentNode.sourceIndex - 1;
    }
    //other browsers
    var i=0;
    while(ele = ele.previousElementSibling){
        i++;
    }
    return i;
}
于 2013-10-14T06:33:10.580 に答える