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?

Benildis

Have you tried $(this).data('star-rating')? – Description

what does console.log((".star-rating").data('star-rating')) return? You dont even loop through elements, which one should it get ? 5.0 or 2.0 ? – Hydrology

@ksno it returns whatever the 1st one is... not really relevant though – Benildis

Answer 1

$(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}

Stellular

Answer 2

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')
    });
});

Endomorphic

As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to jQuery's data object. The treatment of attributes with embedded dashes was changed in jQuery 1.6 to conform to the W3C HTML5 specification. – Weiler

I don't know why this has 5 upvotes as this doesn't answer the question? Why $(this).data('starRating'); has not worked as this is absolutely valid. – Stenograph

Just saying, after recent edit this looks exactly like my answer – Stellular

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")
 });
});

Yellowthroat

While this answer is probably correct and useful, it is preferred if you include some explanation along with it to explain how it helps to solve the problem. This becomes especially useful in the future, if there is a change (possibly unrelated) that causes it to stop working and users need to understand how it once worked. Thanks! – Saurischian

Added some description. I think this is so generic code anyone can understand If using JavaScript and JQuery. – Yellowthroat

Answer 4

You must use this:

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

Bowing

That's not true about data(). It will and does return HTML data attributes. – Sainted

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'); }
});

Berberine