I am using twitter-bootstrap as my CSS framework and I have a sidebar that is made up of various list-groups and those list-groups have several list-group-items. However, only one list-group-item will ever have the active class.

What I'm attempting to do is set the href of previous/next buttons based on which list-group-item currently has the active class.

This is what I'm trying right now:
Code:
$(document).ready(function(){
    //get all of the list-group-items
    var lessons = $('li.list-group-item').not('.list-group-item-info');

    //get the index of the current lesson
    var currentIndex = lessons.index(lessons.find('.active'));

    //check to see if there is a previous lesson
    if (currentIndex > 0) {
        $('#previousLesson').attr('href', lessons.get(currentIndex - 1).children('a:first').attr('href'));
        $('#previousLesson').parent().removeClass('disabled');
    }

    //check to see if there is a next lesson
    if (currentIndex < lessons.length - 1) {
        $('#nextLesson').attr('href', lessons.get(currentIndex + 1).children('a:first').attr('href'));
        $('#nextLesson').parent().removeClass('disabled');
    }
});
The lessons variable returns all of the valid list-group-items, but the currentIndex is always returning a -1. I'm not understanding why it is returning a -1 because whenever I debug my code and view the lessons collection in the watch window, I can clearly see an item that contains the active class.

So my question is, why is the find Method not returning the item?