2

ライブラリソリューションはありません。これを実行するソリューションをご存知の場合は、それらがどのように実行するかを確認できてうれしいです。フォールバックとクロスブラウザのサポートにはそれほど関心がありません。

私は階層を持っています（それは変わるでしょう）：

<body>
    <div></div>
    <div>
        <div></div>
        <div></div>
        <div>
            <a>Click Me!</a>
        </div>
    </div>
</body>

イベントリスナーをオンに<a>Click Me!</a>して、イベントオブジェクトを取得します。それだけはうまくいきます。YEY！

event.targetdom階層の数値インデックスが必要です。基本的には[0][1][2][0]（おそらく配列として返されますが、、、それは[0,1,2,0]私にとっては問題ありません）。

これは、親要素を反復処理することで実行できることを私は知っています。可能であれば、その反復を避けようとしています。

編集 私の最後の編集をばかげた行為として編集します。

4

3 に答える 3

6

明示的な反復なしでインデックスを取得する方法は、配列indexOfメソッドを使用することです。

これがどのように見えるか、eはあなたのイベントです：

function getIndex(e){
  var t=e.target;
  return Array.prototype.indexOf.call(t.parentNode.childNodes,t);
}

この手法には多くの落とし穴があります。まず、indexOfは最新のブラウザでのみサポートされています。次に、NodeListは配列ではないため、呼び出しトリックが必要です。第3に、childNodesは予想よりも多くのノードを返す可能性があり、ノードタイプでフィルタリングする必要があります。

階層インデックス全体を取得するには、parentNodeを使用してDOM階層を上るときに、すすぎ、繰り返します。

ちなみに、e.targetもクロスブラウザではありませんが、これはすでに使用しているものだと思います。

[更新]childNodesの代わりに子を使用する完全なコード：

function getIndex(e) {
var index=[],
    t=e.target;

while (t!==document.body) {
    index.unshift(Array.prototype.indexOf.call(t.parentElement.children,t));
    t=t.parentElement;
}
return index;
}
于 2012-10-31T06:04:08.367 に答える
3

反復を避けたいと思いますが、おそらく最も簡単な戦略です。

$(document).on('click','a', function(e){
  var result=[];
  var count = function(e){
    if(e.parentNode != document.body ){
      result.push(e);
      count(e.parentNode);
   }else {
      return result;                                    
   }
 };
 count(e.target)
 console.log(result);
});

反復を避けようとしている理由は何ですか？domは巨大か何かですか？

于 2012-10-30T21:01:47.887 に答える
1

あなたは「要素はページ上で非常に急速に動的に変化する」と言い、「dom内の要素の位置を模倣する配列をjavascriptで作成しようとしている」と言います。つまり、移動した要素のインデックスパスだけでなく、移動しなかった要素のインデックスパスも再計算する必要があります。

結論：個々の要素のパスを計算する代わりに、階層全体を反復処理することは理にかなっています。とにかく、1つではなく、すべてのインデックスパスを再計算する必要があるからです。

于 2012-10-30T21:55:41.810 に答える