[jQuery]兄弟要素の何番目か取得したりn番目を指定したりする方法

地味に使う。

何番目の要素か取得する
n番目の要素を指定する
取得＆指定を組む場合

何番目の要素か取得する

こんなのがあったとして、クリックしたところの<li>が何番目かを取得する。

<ul>
  <li><a></a></li>
  <li><a></a></li>
  <li><a></a></li>
  <li><a></a></li>
︙
</ul>

クリックしたそのものよりも、クリックしたものの親が並んでる場合が多いので両パターンを書く。

//liで発火
$('ul li').click(function(){
  var Num = $('ul li').index(this);
  alert(Num);
})

//aで発火
$('ul li a').click(function(){
  var Num = $('ul li').index($(this).closest('li'));
  alert(Num);
})

.parent()でもいいけど.closest()もいいですね。

.index()は0からカウントする。

n番目の要素を指定する

こんなのがあったとして、特定の<li>にclassを付与したいとする。

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
︙
</ul>

こうなる。

//3番目に.activeを付与
var Num = 2;
$('ul li').eq(Num).addClass('active');

//別パターン
var Num = 2;
var Num = Num + 1;
$('ul li:nth-child('+ Num +')').addClass('active');

.eq()も0からカウントする。
css的な書き方で:nth-child()も使えるんだけど、こっちは1からカウントする。

取得＆指定を組む場合

いちいちidとか振るのはめんどくさいしそこまで凝ったもんじゃないから、みたいな感じで、「ナビゲーションのn番目をクリックしたらタブのn番目を表示」みたいに並びをリンクさせた組み方をすることはたまにある。

そうすると.index()で取得→.eq()で指定で組むのが楽。

という、状況ありきでの記事。