JQueryに問題がある.index

Question

私は.indexに関する助けが必要です（私が望むものを達成するためにいくつかの方法を試してみましたが、残念なことに、失敗して頭痛がありました。おそらく誰かが私を正しい方向に向けることができます。

// on click show the associated tab list 
$('.menutabs li').click(function(i) { 
i.preventDefault(); 
//var index=$('.menutabs li').index(this); 
var index=$('.menutabs li').eq(); 
var parent=$('.menutabs li:eq('+index+')').parent().index(); 
alert('INDEX MENUTABS LI A:'+index+' INDEX PARENT:'+parent); 
$('.menutabs li:eq('+index+') a').removeClass('current-page-item'); 
$('.menutabs li:eq('+index+') a').toggleClass('current-page-item'); 
} 

警告一部正しいインデックス番号のために示されている：

<ul class="menutabs slideshow"> 
<li><a href="" class="current-page-item">Latest Addition</a></li> 
<li><a href="">Most Download</a></li> 
<li><a href="">Most Watch</a></li> 
<li><a href="">Top Rated</a></li> 
</ul> 
<!-- some other html here --> 
<ul class="menutabs"> 
      <li><a href="" class="current-page-item">Genres</a></li> 
      <li><a href="">Years</a></li> 
</ul> 
<!-- some other html here --> 
<ul class="menutabs"> 
      <li><a href="" class="current-page-item">Top Rated</a></li> 
      <li><a href="">Popular</a></li> 
</ul> 

これは、JSコードがある：それは）

私は、リストのこの種（タブとしてその行為を）持っていますancホーリンク。しかし、親インデックスでは、正しいインデックス番号を与えるが、最後のもの（3番目のmenutab）ではなく、1番目と2番目の.munutabsしか見えない。

しかし、CSS境界線を変更しようとすると、完全に動作します（.menutabs境界線が指定された赤色に変更されています）。それは本当に私を混乱させます。

実際には、私がエラーをキャッチしようとするテストとしてのみアラートとCSSの境界部分は、ユーザーがそのクラス内のアンカーリンクをクリックしたときに親.menutabsのインデックス番号を検出する必要があります。だから私は、その中の他のliのクラス名を変更することができます。

は、誰もが

Answer 1

私はあなたが何をしようとしているのかよく分かりません。そのJavaScriptは、リンクの1つのクリックハンドラとして呼び出されますか？

ul.menutabsが複数あるため、問題が発生する可能性がありますが、parentを検索するときはどちらを指定していません。より良い方法は$(this).parent().parent()となります。その場合はcss('border', '1px solid red')と呼ぶことができます。

編集：これはかなり簡単です。

クリックハンドラでは、$(this)には常にクリックされたオブジェクトへの参照が含まれます。だからあなたは以下を行うことができます：

$(this).siblings('li').children('a').removeClass('current-page-item'); 
$(this).children('a').addClass('current-page-item') 

Answer 2

を試みるこの問題を解決するための任意の提案を持っており、事前に感謝します

VAR指数= $（ 'menutabs李。'）EQ（）;