jQuery возвращает позицию элемента списка с классом по щелчку столбца таблицы.

Question

Мне было интересно, как вернуть позицию элемента списка с классом 'currentTab' в следующем неупорядоченном списке:

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

Класс установлен в HTML для запуска. Далее для выбранной вкладки устанавливается значение «currentTab», а затем удаляется предыдущий класс:

$('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"); 

});

Я подумал, что если я добавлю следующее к вышеприведенному, это вернет текущую, так сказать, позицию вкладки:

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

Кажется, это не работает для меня.

Answer 1

Используйте ключевое слово this при ссылке на текущий элемент.

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

Хотя проблема в вашем случае заключалась в том, что вы ограничивали индекс внутри currentTab, поэтому вы выбирали только один ..

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

вышеописанное также должно работать (обратите внимание, что я удалил .currentTab из первого селектора)