JQuery $(this) not working inside a function parameter

Question

The following code doesn't work:

$(".countdown").circularCountdown({

    startDate:$(this).attr('data-start'),
    endDate:$(this).attr('data-end'),
    timeZone:$(this).attr("timezone")

});

The one below works fine,

$(".countdown").circularCountdown({

    startDate:$(".countdown").attr('data-start'),
    endDate:$(".countdown").attr('data-end'),
    timeZone:$(".countdown").attr("timezone")

});

I don't get it, doesn't the $(this) reference ".countdown" since I'm calling the function on this element? Could someone please help me out?

Answer 1

Because this does not refer to the countdown so one solution is to use each()

$(".countdown").each(function () {
    $(this).circularCountdown({
        startDate: $(this).attr('data-start'),
        endDate: $(this).attr('data-end'),
        timeZone: $(this).attr("timezone")
    });
})