【GA計測にも使える！】押された要素が何番目なのかを調べる方法。

押された要素が何番目か調べる方法は、いくつかありますが個人的によく使うものをご紹介します。
※ jQueryを使用しています。

パターン1：リストで何番目を押されたかを調べる。

HTML

<ul id="list">
<li>ああああああああ</li>
<li>いいいいいいいい</li>
<li>うううううううう</li>
<li>ええええええええ</li>
<li>おおおおおおおお</li>
</ul>

Javascript

$("#list li").on('click',function(){
  var index = $("li").index(this);
});

純粋にli要素を押したものをindex(this)で返せば良いです。

パターン2：子要素(a)を押して、親要素(li)が何番目かを調べる。

HTML

<ul id="list2">
<li><span><a href="#">ああああああああ</a></span></li>
<li><span><a href="#">いいいいいいいい</a></span></li>
<li><span><a href="#">うううううううう</a></span></li>
<li><span><a href="#">ええええええええ</a></span></li>
<li><span><a href="#">おおおおおおおお</a></span></li>
</ul>

Javascript

$("#list2 a").on('click',function(){
  var index = $(this).parents("li").prevAll().length;
  return false;
});

押した要素の親要素を取得し、prevAll()を使いその要素の前以前にある兄弟要素の数を数えることで何番目かを判定します。
例）3番目のリンクを押した場合、3番目の要素より前にある兄弟要素は1番目と2番目の要素になるので返り値は“2”になる。

あまりよくない例。

var num = $(this).parent().parent().prevAll().length;

a要素のお父さんは、spanお父さんでそのお父さんは、liお父さんで..みたいなノリのやつですね。
ソースを見返した際に分かりずらいし、目的の要素を探すのに無駄な処理だと思います。
一歩ミスったら取得できないですし...危険ッ。

ってことで、parents(elem)で探した方が断然わかりやすいのでオススメです。
ちなみに、parents(elem)の場合 class名やID名も指定できるのでかなり便利。

パターン3：子要素(a)を押して、親要素(.test)が何番目かを調べる。

HTML

<ul id="list3">
<li class="test"><div><span><a href="#">ああああああああ</a></span></div></li>
<li class="test"><div><span><a href="#">いいいいいいいい</a></span></div></li>
<li class="test"><div><span><a href="#">うううううううう</a></span></div></li>
<li class="test"><div><span><a href="#">ええええええええ</a></span></div></li>
<li class="test"><div><span><a href="#">おおおおおおおお</a></span></div></li>
</ul>

Javascript

$("#list3 a").on('click',function(){
  var index = $(this).parents(".test").prevAll().length;
  return false;
});

子要素(a)の親要素(.test)を取得し何番目かを返すやり方です。

DEMO

パターン1からパターン3までのDEMOになります。

See the Pen LRKrWo by paradox_tm (@takumaro-web) on CodePen.

いかがだったでしょうか。
特にparents()は使い方によっては、押した要素の親のclass名を取得したり、ID名を取得したり色々便利ですね。
そのclass名やID名をlabelにしてdatalayerでもってpushすることもできたり、label名の指定に取得した番号と文字列を合わせてpushすることもできそうですね！
ソースのダイエットにも繋がります。

それでは、また。