地味に使う。
何番目の要素か取得する
こんなのがあったとして、クリックしたところの<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()で指定で組むのが楽。
という、状況ありきでの記事。
コメント