jQuery2.xでonメソッドをコールしたオブジェクトのセレクタをコールバック関数から参照するには？

[code]

    $('.hogehoge .hugahuga .piyopiyo div').on('click',function(){
      index = $('.hogehoge .hugahuga .piyopiyo div').index(this)
    });
    
[/code]

のように、長ったらしいセレクタを2度記述するのを回避する方法は

[code]

    target = $('.hogehoge .hugahuga .piyopiyo div')
    target.on('click',function(){
      index = target.index(this)
    });
    
[/code]

のように変数を定義するしかないですか？

[code]

    $('.hogehoge .hugahuga .piyopiyo div').on('click',function(e){
      index = $(e.xxx).index(this)
    });
    
[/code]

のようにコールバック関数の内部から呼び出すことは不可能ですか？




はじめに、`$(this)` を使う方法を思いつきました。しかしこれはクリックした要素しか返ってこないため、意図した挙動をしませんでした。

[code]

    <div class="hogehoge">
      <div class="hugahuga">
        <div class="piyopiyo">
          <div>first</div>
          <div>second</div>
          <div>third</div>
        </div>
      </div>
    </div>
    
[/code]

上記のような `.hogehoge .hugahuga .piyopiyo div` で引っかかる要素が同じ親要素のもとにあるならば

[code]

    $('.hogehoge .hugahuga .piyopiyo div').on('click',function(e){
        index = $(this).parent().find(this).index()
    });
    
[/code]

で動作することを確認しましたが、どうでしょうか。




はじめに、`$(this)` を使う方法を思いつきました。しかしこれはクリックした要素しか返ってこないため、意図した挙動をしませんでした。

[code]

    <div class="hogehoge">
      <div class="hugahuga">
        <div class="piyopiyo">
          <div>first</div>
          <div>second</div>
          <div>third</div>
        </div>
      </div>
    </div>
    
[/code]

上記のような `.hogehoge .hugahuga .piyopiyo div` で引っかかる要素が同じ親要素のもとにあるならば

[code]

    $('.hogehoge .hugahuga .piyopiyo div').on('click',function(e){
        index = $(this).parent().find(this).index()
    });
    
[/code]

で動作することを確認しましたが、どうでしょうか。

