-
ID:6BFjoN さんの質問

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 件

ID:i2kYJL さんの回答

その構成ですとクリックされた.nextが何番目か分かればliの順番も自ずと分かるのでは?

ID:6BFjoN

分かるとおもったのですが、上手く取得が出来ませんでした。

ID:Qwl3AG さんの回答

ul#hogeだとして、これで取れるけど、どちらにしてもスマートじゃないな。

var li = $("#hoge").children();
$(".next",li).on("click",function(){
 var n = li.has(this).index();
});

ID:6BFjoN

ありがとうございます。そういう取り方もあるんですね。
スマートじゃないのは自分でもわかっているのですが、どうすればいいのかといった感じで相談させていただきました。

ID:7xLQOw さんの回答

いろんな書き方があるからどれが正しいというのはないけど、
自分ならこう書くかな?

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の引数は不要。

ID:6BFjoN

このやり方で無事取れるようになりました。
closestメソッドは知っていたのですが、使い方をイマイチ理解していませんでした。
こうやって使ってあげればいいんですね。
ありがとうございます。

最終更新日:2014-02-09 (10,419 views)

関連するトピックス

ページ上部に戻る