JS data-attribute for multiple elements with different values

Question

I code that shows a progress bar:

<span class="starsCount" data-length="64"></span>

<span class="starsCount" data-length="13"></span>

<span class="starsCount" data-length="33"></span>

and assigned bar length using Jquery UI Progressbar Widget by calling JS function in the way:

$(function () {
    $(".starsCount").progressbar({
        value: $('.starsCount').data('length')
    });
});

Now, I got an issue that all elements have the equal bar length of the first one data-length="64" . Any help is much appreciated.

Code snippet: http://jsfiddle.net/hbLw34ec/

Answer 1

You need to loop over each specific element and instantiate the progressbar on them individually. This allows you to access the data attribute of each element in the set using the this keyword. Try this:

$(".starsCount").each(function() {
    $(this).progressbar({
        value: $(this).data('length')
    });
});

Example fiddle