JQuery UI: multiple progress bar - problems to set dynamic values

Question

I have some progress bar (search results), which value is dynamically set on document.ready

<div class="progressbar" rel="21"></div>
<div class="progressbar" rel="36"></div>
<div class="progressbar" rel="44"></div>
<div class="progressbar" rel="58"></div>

And

$(document).ready(function () {

  $("div.progressbar").progressbar({
    value: $(this).attr("rel")
  });
});

This not seems to work. Instead, if i do value: 40, everything works, so the problem is not in the inclusion or use.

I tried with $.each too, but nothing

$("div.progressbar").each (function () {
    var element = this;

    console.log($(element).attr("rel")); //ok right value

   $(element).progressbar({
        value: $(element).attr("rel")
    });
});

Any ideas?

EDIT: This works

$("div.progressbar").each (function () {
    var element = this;

   $(element).progressbar({
        value: parseInt($(element).attr("rel"))
    });
});

Answer 1

need to send a number

progressbar => object value => integer

$(element).attr("rel") = "21" => string value
parseInt($(element).attr("rel")) = 21 integer value


$(document).ready(function () {
  $("div.progressbar").progressbar({
    value: parseInt($(element).attr("rel"))
  });
});