Having problem with JQuery .index

I need help regarding of .index(had try several way to achieve what I want but unfortunately its failed and got an headache lol , perhaps someone here can point me to a right direction-I do appreciated it)

I have this kind of list(that act as a tabs):

<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>

This is the js code:

// 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');
}

The alert part have sho开发者_开发知识库wn the correct Index number for the anchor link. However for the parent index, it seem only the 1st and 2nd of .menutabs that giving a correct index number but not for the last one(the 3rd menutabs).

However, when trying to change the css border, it work perfectly(the .menutabs border have been changed to the red color as specified). That really make me confused.

Actually the alert and css border part only as a testing where I try to catch the error, what I need is to detect the index number of the parent .menutabs when user clicked on the anchor link inside that class. So then I can change the class name for other li inside that .menutabs.

Do anyone have any suggestion for resolving this problem and thank in advance

I'm not quite sure what you're trying to do. Is that Javascript called as a click handler for one of the links?

If so, there are going to be problems because you have multiple ul.menutabs, but you're not specifying which one when you look for parent. A better way would be $(this).parent().parent(), and then you can simply call css('border', '1px solid red') on that.

edit: ahh, that's quite simple to do.

In your click handler, $(this) will always contain a reference to the object clicked. So you can do the following:

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

try

var index=$('.menutabs li').eq();