how to use a variable in jquery ui progressbar

Question

I wanna display a progressbar based of what the data- value of that wrapper div is.

<div class="photo webdesignTag" data-progress="20">
    <div class="photo-image"></div>
    <h2>Example1</h2>
    <div class="progressbar"></div>
</div>
<div class="photo photoshopTag" data-progress="50">
    <div class="photo-image"></div>
    <h2>Example2</h2>
    <div class="progressbar"></div>
</div>

$(".photo").each(function() {
    var ProgressBarContainer = $(this).attr("data-progress");
    $(this).children("h2").html(ProgressBarContainer);
    $(this).children(".progressbar").progressbar({
        value: ProgressBarContainer
    });

Can anyone help me?

Answer 1

The issue is because you use attr() to get the data-progress value. This returns a string, whereas the value property is expecting an integer. If you retrieve the value using data() it will be correctly typed:

$(".photo").each(function() {
    var $el = $(this);
    var progressBarValue = $el.data("progress");
    $el.children("h2").html(progressBarValue);
    $el.children(".progressbar").progressbar({
        value: progressBarValue
    });
});

Example fiddle