Ran into some troubles when using waypoints and jquery $(this)

Question

I'm using the latest waypoints library. Everytime waypoints passes a program-block it should log the value of the attribute data-index to the console but everytime this happens it outputs undefinded.

How can I handle this?

<div class="program-block" data-index="1"></div>
<div class="program-block" data-index="2"></div>
<div class="program-block" data-index="3"></div>
<div class="program-block" data-index="4"></div>
<div class="program-block" data-index="1"></div>

var waypoints = $('.program-block').waypoint({
    handler: function(direction) {
        console.log($(this).data('index'));
    }
});

Here's my code (but no working sample):

Here the link to the waypoints website:

Answer 1

In Waypoints 3 this is not a reference to the HTML element. It is a reference to the Waypoint instance. To get to the underlying element, you must use this.element.