laimas,
рони,
Вот смотрите...
Html структуру вы вдели. У нас есть получения индекса после загрузки страницы и присвоения active блоку span:

var index = $('.active').index();

После чего в следствии работы некой функции класс active будет присваиваться другому порядковому элементу span (а именно 3-му).
Если мы оставляем всё как есть, index не обновит данные о смене класса active и не сменит значение с 0 на 2.

Как я писал выше, если добавить index в функцию с событием click он будет обновляться после клика.

$('*любой стиль для кнопки*').click(function() {
  var index = $('.active').index();
  console.log(index)
})

А как сделать это обновление переменной index без внешнего вмешательства пользователя, а именно клика/перетаскивания/скрола и прочего?

Это и вся проблема? Так вам рони давно уже сказал, то что изменяет его, должно заниматься и изменением значения переменной. Некая функция изменила класс, пусть и изменяет значение переменной index.

laimas,
В том то и дело, нельзя изменить то что его меняет

Это как?

PS. Видимо оба процесса, который меняет имя класса, и который пытается получить обновленный индекс, это асинхронные процессы, отсюда и проблема, которая вам кажется как невозможность первого установить значение.

laimas, рони,
Malleys.
Спасибо за подсказки, ребят, решил проблему.
А всё же, если нет возможности изменить то что меняет, как тогда можно было бы решить эту задачку?