jQuery UI ProgressBar - Setting Value Equal To HTML Attribute

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?

Will Grams · Accepted Answer · 2012-09-07 04:00:45Z

5

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

answered Sep 7, 2012 at 4:00

Will Grams

4006 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kmoney12 Over a year ago

Thanks both to you and the answer above me!

rwilliams · Accepted Answer · 2012-09-07 04:01:05Z

1

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

answered Sep 7, 2012 at 4:01

rwilliams

21.5k6 gold badges53 silver badges55 bronze badges

2 Comments

kmoney12 Over a year ago

Thank you! May I ask why $this is the window and not the element?

rwilliams Over a year ago

the progressbar method doesn't set the "this" value which means it's going to default to whatever it is in your current scope, usually the Window object. With each() this is set to the current element/object your loop is on.

Michael0x2a · Accepted Answer · 2015-07-08 18:16:42Z

-2

You must set the value attribute:

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

edited Jul 8, 2015 at 18:16

Michael0x2a

65.6k32 gold badges189 silver badges241 bronze badges

answered Jul 8, 2015 at 15:12

Phạm Văn Thủy

111 bronze badge

Collectives™ on Stack Overflow

jQuery UI ProgressBar - Setting Value Equal To HTML Attribute

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related