Q: Need to assign width to element by taking value from attribute I have this HTML code:
<div class="skills">
    <div class="skill">
        <span>Photoshop</span>
        <div class="bar" data-percent="80">
            <div></div>
        </div>
    </div>

    <div class="skill">
        <span>Illustrator</span>
        <div class="bar" data-percent="20">
            <div></div>
        </div>
    </div>

    <div class="skill">
        <span>Wordpress</span>
        <div class="bar" data-percent="30">
            <div></div>
        </div>
    </div>

    <div class="skill">
        <span>Joomla</span>
        <div class="bar" data-percent="65">
            <div></div>
        </div>
    </div>
</div>

And this jQuery code:
var width = $('.bar').attr('data-percent');
$('.bar > div').css('width', width + "%");

Right now it's getting the first .bar's value of the data-percent attribute, e.g. 40, and passing it as a CSS style, e.g. width: 40%, but it's taking the first .bar's attribute only, and applying the same width to all the other elements. I want it to take the attribute for each of them, and assign their widths to each of them.

A: Try
$('.bar > div').css('width', function(){
    return $(this).parent().data('percent') + '%'
});

Demo: Fiddle

A: you can use the .each function to handle each .bar element, and you can use jquery's .data function to get data-* attributes instead of the .attr function
$('.bar').each(function() {
   var width = $(this).data("percent");
   $(this).find('div').css("width",width+"%");
});


A: replace your jQuery code on:
$('.bar > div').css('width', function(){
    return $(this).parent().data('percent') + '%'
});


A: $('.bar').each(function() {
var width = $(this).data("percent");
$(this).find('div').css("width",width+"%");
});

