JQuery $ (this) does not work inside function parameter

Question

The following code does not 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 understand if the $ (this) link is referring to ".countdown" as I call the function of this element? Can someone please help me?

Answer 1

Because this does not apply to 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") }); }) 

Answer 2

$ (this) is usually attached to the element that is clicked, hovered, etc. I suppose you should specify or select an element that has a data-start attribute before using the $ (this) selector. Could you provide more information on how you use this function and your html structure?

Answer 3

You do not call a function on it, you call the plugin. This way you write json parameters that don't know what the object is. I totally agree with Arun P. Johnny that it is. If you want to go deeper, you can change those values ​​in the plugin

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

And it will work :)

Answer 4

Inside the object's initializer, "this" refers to the execution context of the current executable function, which is the function in which your call to roundCountdown is executed, or (and this is what I would most likely assume) the global context by default if the call is not located inside the function.

You can solve your problem as follows:

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

jQuery each method allows you to pass a function to initialize each of your elements in turn, with access to the element that is currently initialized through "this".

Answer 5

You execute $(".countown") and $(this) at (almost) the same time. Therefore, this indicates what it was pointing to when you called $(".countown")

Visual example

 var currentThis = this; $(".countdown").circularCountdown({ startDate:$(this).attr('data-start'), // "this" is the same as "currentThis" endDate:$(this).attr('data-end'), timeZone:$(this).attr("timezone") }); 

You are probably thinking of jQuery functions in which you pass a callback. In this case, jQuery sets this in the callback to point to the object that the function was called on. Just like Arun is mentioned with $ .each

Another solution is to save it in a variable, you do not want to run the same query four times.

 var ctDown = $(".countdown"); ctDown.circularCountdown({ startDate: ctDown.attr('data-start'), endDate: ctDown.attr('data-end'), timeZone: ctDown.attr("timezone") });