クリックした要素が何番目か純粋なJavascriptだけで実装する<javascript>

今日はクリックした要素が何番目か純粋なJavascriptだけで実装する方法を解説します。

 

方法は割とシンプルで「forEach」と「addEventListener」を組み合わせるだけです。

 

それでは早速やっていきましょう。

例として下記HTMLだった場合の順番を取得する方法を見ていきましょう。

超シンプルなリストですね。

 

この場合であれば以下の様にすると順番を取得できます。

 

しかし、この場合ですと一つのリストの順序しか得られません。

コーディングをしていると複数の要素から子要素の順番を取得した方がスマートな場面というのは多いものです。

その場合はどうすれば良いかというと、これも単純に「forEach」を一周増やしてやると実装することができます。

 

例として下記HTMLの場合を見て行きましょう。

今回はクラス属性で「list」が付与されたulタグが二つありますね。

この場合は以下のようになります。

※ちなみに例なのでクラスでなくとも良いですし、ulタグじゃなくてももちろん大丈夫です。

 

これでのどlistの子要素のliをクリックしてもlist事の順番を取得することができました。

 

場合によっては純粋なjavascriptを使う必要がある時もあると思いますのでそんな時にも参考にしてくださいまし。

 

 

JavaScript

こちらもおすすめ