How to access data attribute using jQuery

Question

I'm struggling with what is probably a very simple bit of jQuery

I have html like this:

<div class="star-rating" data-star-rating="5.0"></div>
<div class="star-rating" data-star-rating="2.0"></div>

I have some javascript which needs to do something based on the star rating of each of these elements and currently looks like this:

$('.star-rating').jRate({
    startColor : '#ccc',
    endColor : '#ccc',
    readOnly : true,
    rating : <value of data-star-rating>
});

I want to replace <value of data-star-rating> with the value of the data attribute relating to the element currently being processed

I thought this would work $(this).data('starRating') but it doesn't seem to

How can I access the value of the data attribute in this situation?

Answer 1

You can use this too :

$(this).data('star-rating');

EDIT

After reading again the question. Comments are right, you should iterate through .star-rating array to apply the jRate to each element, sorry for my misunderstanding.

$('.star-rating').each(function () {       
    $(this).jRate({
        startColor: '#ccc',
        endColor: '#ccc',
        readOnly: true,
        rating: $(this).data('star-rating')
    });
});

Answer 2

$(this) doesn't refer to the element on which the jRate function is being called.

You can use the selector if there is only a single element having that class

$('.star-rating').jRate({
    startColor : '#ccc',
    endColor : '#ccc',
    readOnly : true,
    rating : $('.star-rating').data('star-rating')
});

For multiple elements:

Iterate over all the elements having the class star-rating and attach the plugin jRate individually with the rating value of the respective element.

$('.star-rating').each(function () {
    $(this).jRate({
        startColor: '#ccc',
        endColor: '#ccc',
        readOnly: true,
        rating: $(this).data('star-rating')
    });
});

JSFiddle Demo^{Didn't find CDN link of that plugin, so added the minified code in JavaScript pane itself}

Answer 3

As there are more than one elements having class "star-rating" so you will need to loop through the elemets and forEach loop will make current iterating element accessible into the loop so you can use that element. And apply the JRate.

 $('.star-rating').forEach(function(dateRating){
  $(dateRating).jRate({
  startColor : '#ccc',
  endColor : '#ccc',
  readOnly : true,
  rating :  $(dateRating).attr("data-star-rating")
 });
});

Answer 4

You must use this:

$(this).attr('data-star-rating');

Answer 5

$(this).data('star-rating') will work if you return it from a function.

$('.star-rating').jRate({
    startColor : '#ccc',
    endColor : '#ccc',
    readOnly : true,
    rating : function () { return $(this).data('star-rating'); }
});