3

次のような HTML があります。

<div class="TopClass">

  <div class="ContentClass">
    <div class="ActionClass">action</div>
  </div> 

  <div class="ContentClass">
    <div class="ActionClass">action</div>
  </div> 

  <div class="ContentClass">
    <div class="ActionClass">action</div>
  </div> 

</div>

TopClass に対するアクション クラスのインデックスを取得しようとしています。ユーザーが 2 番目の Action クラスをクリックすると、2 が返されます。

$('.ActionClass').click(function () {
    alert($(this).parent().parent().index());  // not working    
});
4

4 に答える 4

6

このように使用すると、構造が変更されても.index 常に のインデックスが得られます。.ActionClassしかし、インデックスを.index返すので、その出力に追加しています：0-based1

$('.ActionClass').click(function () {
   alert($(this).closest('.TopClass').find('.ActionClass').index(this) + 1);
});​

働くフィドル

もう 1 つの短い方法は次のようになります。これは、.TopClassこれまでのところ 1 つの親コンテナーのみで正常に機能しますが、別の構造の場合は慎重に使用してください。以前のものはより安全で、一般的なケースで機能します

$('.ActionClass').click(function () {
   alert($('.ActionClass').index(this) + 1);
});​

働くフィドル

于 2012-06-04T09:45:26.033 に答える
2

コードはほぼ正しいです。親ノードからインデックスを取得するだけです:

$('.ActionClass').click(function () {
    alert($(this).parent().index());
});

<strong>免責事項

以外に兄弟がいる場合、これは機能しません.ContentClass。そのためには、Joy's answerを参照してください。

于 2012-06-04T09:47:15.367 に答える
1 
$index = jQuery.inArray($(this)[0], $('.ActionClass')) + 1

このソリューションは、HTML 構造に関係なく機能します。一致したすべての「.ActionClass」要素を含む配列内で、クリックされた「.ActionClass」要素の配列インデックスを見つけます。

于 2012-09-27T00:33:26.910 に答える
1

あなたのparent().parent()はあなたを構造の高すぎます:

$('.ActionClass').click(function () {
    alert($(this).parent().index());  // not working    
});​

動作しますが、ゼロベースなので、3 つの div クリックに対して 0、1、および 2 を取得します。

http://jsfiddle.net/amelvin/AhReg/

編集

修正に基づいて、index() メソッドでオプションのセレクター変数を使用できます。

<div class="TopClass">

  <div class="ContentClass">
    <div class="ActionClass">action</div>
  </div> 

  <div class="ContentClass">
    <div class="ActionClass">action</div>
  </div> 

  <div class="test"></div>
  <div class="test"></div>  
  <div class="test"></div>
  <div class="test"></div>  
  <div class="test"></div>
  <div class="test"></div>  

  <div class="ContentClass">
    <div class="ActionClass">action</div>
  </div> 

</div>​

$('.ActionClass').click(function () {
    alert($(this).parent().index(".ContentClass"));  // not working    
});​
于 2012-06-04T09:48:37.810 に答える