クリックした要素が自分を含む親要素から見て、n番目の子要素である「n」を取得したい

Question

<div class="wrapper_1">
  <div class="clickable">a</div>
  <div class="clickable">c</div>
  <div class="clickable">b</div>
</div>

<div class="wrapper_2">
  <div class="clickable">12</div>
  <div class="clickable">13</div>
  <div class="clickable">64</div>
</div>

上記のような構造を持つHTMLについて

$('.clickable').on('click',function(){
  //
})

例えば<div class="clickable">b</div>をクリックした場合、自分が自分を含む親要素のなかで、3番目の要素であることを取得したいのですが、何か術はあるでしょうか？

Comments

[yambejp]

jQueryがよいのでしょうか？
「親要素から見て、n番目の子要素」も仕様があいまいです。

Answer 1

Comments

[SugiuraY]

ありがとうございます。私の要件が曖昧であった部分はお詫びいたします。動かしてみたのですが、やはり"wrapper_1"、"wrapper_2"の中で何番目であるか無差別に番号を取得してしまいます。その点も迷っていたのですが、yambe.jp様の方法で、親要素までさかのぼってから絞ることで実装することができました！

Answer 2

<script>
$(function(){
  $('.clickable').on('click',function(){
    var idx=$(this).parent().find('.clickable').index(this)+1;
    console.log(idx);
  });

});
</script>
<div class="wrapper_1">
  <div class="clickable">a</div>
  <div class="clickable">c</div>
  <div class="clickable">b</div>
</div>
<div class="wrapper_2">
  <div class="clickable">12</div>
  <div class="clickable">13</div>
  <div class="clickable">64</div>
</div>

Comments

[SugiuraY]

ありがとうございます。まさにイメージ通りでした。
曖昧な要件の中、行間まで読んでいただきありがとうございます。