jquery - 需要通过从属性中获取值来为元素分配宽度

Question

我有这个 HTML 代码:

<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>

还有这段 jQuery 代码:

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

现在它正在获取 data-percent 属性的第一个 .bar 的 值，例如40，并将其作为 CSS 样式传递，例如width: 40%，但它只采用第一个 .bar 的属性，并对所有其他元素应用相同的宽度。我希望它获取每个属性的属性，并为每个属性分配宽度。

Answer 1

尝试

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

演示:Fiddle