Question

I was wondering how to return the position of a list element with a class of ‘currentTab’ in the following unordered list:

<ul id="coverTabs">
    <li class="currentTab"><a href="#">Individual</a></li>
    <li><a href="#">Couple</a></li>
    <li><a href="#">Family</a></li>
    <li><a href="#">Single parent family</a></li>
</ul>  

The class is set in the HTML to start. The following sets the clicked tab to ‘currentTab’ and then removes the previous class:

$('ul#coverTabs > li').live('click', function() {

    // Clickable tabs
    // Removes default class applied in HTML and onClick adds 'currentTab' class
    $(".currentTab").removeClass("currentTab");
    $(this).addClass("currentTab"); 

});

I thought if i added the following to the above it would return the position of the tab that is currently current so to speak:

    // Find the active tab
    var tabPosition = $('ul#coverTabs > li.currentTab').index ($('.currentTab'));
    var tabPosition = tabPosition + 1

It doesn’t seem to work for me.

Answer 1

Use the this keyword when referring to the current item ..

var tabPosition = $('ul#coverTabs > li').index ($(this));

Although the problem in your case was that you were limiting the index inside the currentTab, so you were selecting only one ..

var tabPosition = $('ul#coverTabs > li').index ($('.currentTab'));

the above should work as well (note that i have removed the .currentTab from the first selector)