CODEWITHSUNDEEP
jqueryhtmljquery-ui
kmoney12
kmoney12

Reputation: 4490

jQuery UI ProgressBar - Setting Value Equal To HTML Attribute

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?

Upvotes: 0

Views: 967

Answers (3)

Phạm Văn Thủy
Phạm Văn Thủy

Reputation: 11

You must set the value attribute:

var progressBar = $('#progressBar');
var v = 70;
progressBar.arrt('value', v);

Upvotes: -2

rwilliams
rwilliams

Reputation: 21497

I would loop through each div to make sure it's grabbing the right "value" attribute because the $(this) in your first example doesn't give you anything as this is the Window Object in that context.

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

Upvotes: 1

Will Grams
Will Grams

Reputation: 400

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

Upvotes: 5

Related Questions