Question

I am trying to initialize multiple Progressbars, under the same class, with just one snippet of jQuery. I want the value to be set to the HTML Attribute “value”.

Here’s the html:

<div class="pop" value="98"></div>
<div class="pop" value="85"></div>
<div class="pop" value="78"></div>
<div class="pop" value="54"></div>

And here is the jQuery that I thought would work:

$( ".pop" ).progressbar({
value: parseInt($(this).attr("value"))
});

It didn’t though. The progress bars appear but they look as if their value is 0.

If I change it to:

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

Then they all get initialized fine but all their value’s get set to the value of the first HTML element (in this example, they would all get set to 98). I expected this.

So is there anyway to do this?

Answer 1

You want to use the jQuery.each function. Here’s an example:

$.each($(".pop"), function() {
    $(this).progressbar({ value: parseInt($(this).attr("value")) });
});

Alternate example:

$(".pop").each(function() {
    $(this).progressbar({ value: parseInt($(this).attr("value")) });
});