title: Add data attiribute values as an inline-css "width" value
body: <p>I have code like this:</p>
  
  <pre><code>&lt;span class="bar" data-percent="25,6"&gt;&lt;/span&gt;
  &lt;span class="bar" data-percent="40,6"&gt;&lt;/span&gt;
  &lt;span class="bar" data-percent="10,6"&gt;&lt;/span&gt;
  &lt;span class="bar" data-percent="60"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>I want to take data-percent values, change comma to dot and add this value as a width to span.</p>
  
  <p>Like this:</p>
  
  <pre><code>&lt;span class="bar" data-percent="25,6" style="width: 25.6%"&gt;&lt;/span&gt;
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('span[class="bar"]').each(function(index, item) {
    var a = $(item).data('percent');
    a = a.replace(/,/g, '.') + '%';
    $(item).width(a);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.bar {
    height: 40px;
    background: red;
    display: block;
    margin-bottom: 20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;span class="bar" data-percent="25,6"&gt;First Span&lt;/span&gt;
  &lt;span class="bar" data-percent="40,6"&gt;Second Span&lt;/span&gt;
  &lt;span class="bar" data-percent="10,6"&gt;Third Span&lt;/span&gt;
  &lt;span class="bar" data-percent="60"&gt;Fourth Span&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I write some jquery but it's not working, if there is no comma in data, jquery is not working. </p>
  
  <p><a href="https://jsfiddle.net/mod7910u/" rel="nofollow noreferrer">https://jsfiddle.net/mod7910u/</a></p>
  
  <p>Thanks to Josh, here is the last working and animated version:
  <a href="https://jsfiddle.net/mg4p5bmc/1/" rel="nofollow noreferrer">https://jsfiddle.net/mg4p5bmc/1/</a></p>