jQueryで親要素が何番目かを数える方法を探しています
以下のコードで、class="next"をクリック時に、何番目のliにあるのかを取得したいです。
よろしくお願いします。
$(’.next’).click(function(e){
e.preventDefault();
var n = $(this).parent("li").parent("ul").children(li).index(this);
alert(n);
});
<ul>
<li>
<div>1</div>
<div class="next">ボタン</div>
</li>
<li>
<div>2</div>
<div class="next">ボタン</div>
</li>
</ul>
みんなの回答 3 件
その構成ですとクリックされた.nextが何番目か分かればliの順番も自ずと分かるのでは？
ul#hogeだとして、これで取れるけど、どちらにしてもスマートじゃないな。
var li = $("#hoge").children();
$(".next",li).on("click",function(){
var n = li.has(this).index();
});
いろんな書き方があるからどれが正しいというのはないけど、
自分ならこう書くかな？
var $next = $(’.next’);
var $li = $next.eq(0).closest(’ul’).children();
$next.click(function(e){
e.preventDefault();
var n = $li.index($(this).closest(’li’));
alert(n);
});
クリックするたびに$liを取得し直すのは冗長な気がしたから先にキャッシュ。
closestは条件に当てはまる一番近い先祖要素を探す便利なメソッド。
ulの中にはliしか入り得ないので、childrenの引数は不要。
関連するトピックス