クリックした要素が何番目か純粋なJavascriptだけで実装する<javascript>
今日はクリックした要素が何番目か純粋なJavascriptだけで実装する方法を解説します。
方法は割とシンプルで「forEach」と「addEventListener」を組み合わせるだけです。
それでは早速やっていきましょう。
例として下記HTMLだった場合の順番を取得する方法を見ていきましょう。
1 2 3 4 5 6 7 |
<ul id="list"> <li>リスト</li> <li>リスト</li> <li>リスト</li> <li>リスト</li> <li>リスト</li> </ul> |
超シンプルなリストですね。
この場合であれば以下の様にすると順番を取得できます。
1 2 3 4 5 6 7 8 |
var listItems = document.querySelectorAll('#list li'); listItems = Array.prototype.slice.call(listItems,0); listItems.forEach(function($listItem,i){ $listItem.addEventListener('click',function(){ console.log('順番',i);//変数「i」に順番が入っている(0スタート) }); }); |
しかし、この場合ですと一つのリストの順序しか得られません。
コーディングをしていると複数の要素から子要素の順番を取得した方がスマートな場面というのは多いものです。
その場合はどうすれば良いかというと、これも単純に「forEach」を一周増やしてやると実装することができます。
例として下記HTMLの場合を見て行きましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<ul class="list"> <li>リスト</li> <li>リスト</li> <li>リスト</li> <li>リスト</li> <li>リスト</li> </ul> <ul class="list"> <li>リスト</li> <li>リスト</li> <li>リスト</li> <li>リスト</li> <li>リスト</li> </ul> |
今回はクラス属性で「list」が付与されたulタグが二つありますね。
この場合は以下のようになります。
※ちなみに例なのでクラスでなくとも良いですし、ulタグじゃなくてももちろん大丈夫です。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var list = document.querySelectorAll('.list'); list = Array.prototype.slice.call(list,0); list.forEach(function($listElements){ var listItems = $listElements.querySelectorAll('li'); listItems = Array.prototype.slice.call(listItems,0); listItems.forEach(function($listItem,i){ $listItem.addEventListener('click',function(){ console.log('順番',i); }); }); }); |
これでのどlistの子要素のliをクリックしてもlist事の順番を取得することができました。
場合によっては純粋なjavascriptを使う必要がある時もあると思いますのでそんな時にも参考にしてくださいまし。
JavaScript