console.log($('.clickable').index('.active'));
console.log($('.pager').index('.active'));
console.log($('div.pager span.clickable').index('.active'));
console.log($('.active').index());
console.log($('.active').closest('.pager').find('.clickable').index('.active'));
console.log($('.clickable').index($('.clickable').filter('.active')));
console.log($('span.clickable').index('.active'));
console.log($('span.active').index());
console.log($('div.pager span.active').index());

<div class="pager">
    <span class="page-number clickable">...</span>
    <span class="page-number clickable">2</span>
    <span class="page-number clickable active">3</span>
    <span class="page-number clickable">4</span>
    <span class="page-number clickable">...</span>
</div>

console.log($('.clickable.active').index('.active'));

console.log($('.clickable.active').index());