How to use jQuery to select inline string width value

Question

I find it difficult to select the value "style =: width: 10%" in jquery for the progressbar element in the bootstrap.

<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 10%;"> <span class="sr-only">0% Complete</span> </div>

This is what I have tried so far $(".progress-bar[style*=width]");, but it returns the entire div.

My goal is to target this value and change it with Ajax.

Here is the jsfiddle link for your reference.

thanks

Answer 1

Try the following.

Get width

var width = $(".progress-bar")[0].style.width;

Set width

$(".progress-bar")[0].style.width = '90%';

Answer 2

Use a filter instead. Try not to use attributes (other than id and class) as selectors.

<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 10%;">

SCRIPT:

$('.progress-bar').filter(function(){ return $(this).css('width') === "10%"; });

http://learn.jquery.com/using-jquery-core/selecting-elements/ , . - .