jQuery to change values of progress-bar "aria-valuenow" attribute and CSS "width" property

Question

I have a progress bar on my page (Bootstrap) that looks like this:

<div id="theprogressbar" class="progress-bar progress-bar-u"       role="progressbar" aria-valuenow="75%" aria-valuemin="0"       aria-valuemax="100" style="width: 75%"> 

I would like to update it via jQuery, I have already done most of the work and calculated the new value I need to put into it, but am unsure of how to target the aria-valuenow and the style="width: " values.

Assuming my jQuery gives me the new value+% as a variable called newprogress:

$('#theprogressbar'). *(please help me finish this line)* (newprogress) 

Answer 1

$('#theprogressbar').attr('aria-valuenow', newprogress).css('width', newprogress); 

value default is px if you want set % follow code below

$('#theprogressbar').attr('aria-valuenow', newprogress).css('width', newprogress+'%'); 

Answer 2

You could use

$('#theprogressbar').attr("aria-valuenow","the new value");  $('#theprogressbar').attr("style","width:"+theincrementingvalue);  

Or you could use .css in jquery http://api.jquery.com/css/