$(this) in javascript

Question

I'm having a problem with using this in js. I have a function that uses this like this:

var refreshRequesterStar = function() {
 $(".rating").raty({
 score: function() { return $(this).attr('data-rating'); },
 readOnly: function() { return $(this).attr('data-readonly'); },
 halfShow: true
 });
};

The rating div is as follow:

<div class="rating" data-readonly="false" data-rating="3.0" style="cursor: default; width: 100px;" title="not rated yet">
<div class="rating" data-readonly="false" data-rating="0.0" style="cursor: default; width: 100px;" title="not rated yet">

This is called by this function:

$("body").ajaxComplete(function(){
 refreshRequesterStar();
 $(".time_to_expire").each(function(){
 setCountDown(this);
 })
 $('select').chosen();
});

I was able to set the score value but I cannot set the readOnly value. When I debugged using firebug, I found that the first this pointed to the div but the second this pointed to window. Where I have been wrong? Note: I don't know much about JavaScript.

More info: I was using raty http://www.wbotelhos.com/raty with rails.

• Rob W: possible duplicate of JavaScript "this" referce to wrong object and javascript 'this' scope in jQuery.
• cypherabe: btw, this is not pure javascript. From the looks and the use of $, i would say it's jQuery. Nevertheless, this and scope are a tricky thing in JS, especially for programmer with a more traditional background
• thd: It's actually jQuery. I'm sorry that I haven't add the jquery tag. Since it's jquery,I don't think this question is a duplicate.
• Angel: You have data-readOnly instead of data-readonly in here: return $(this).attr('data-readOnly'); and the attribute is data-readonly. Check it out!
• cypherabe: not offering this as an answer because I'm not sure and my jQuery is rusty...but shouldn't .attr('data-readOnly') match data-readonly="false" (different cased o) ?

Answer 1

The documentation and examples indicate that the parameter score and readOnly are supposed to be numeric and boolean, not callback functions. You might want to re-write your code this:

$(".rating").each(function() {
 // inside the function, this refers to the .rating element being iterated
 $(this).raty({
 score: parseFloat($(this).attr('data-rating')), // see note #1
 readOnly: $(this).attr('data-readonly') == "true", // see note #2
 halfShow: true
 });
});

1. .attr() returns a string; parseFloat() function is used to convert a string e.g. "2.5" into the number 2.5
2. == "true" returns boolean true if the attribute value is equal to "true"; returns false in all other cases

Ref:

• jQuery.each()
• jQuery.attr()

• Baz1nga: not a big fan of the unary operator suggestion given here and will also violate jslint validation.. Rather cast it like this: Number($(this).attr('data-rating');