需要通过从属性中获取值来为元素指定宽度

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 + "%");

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

Answer 1

尝试

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

演示:小提琴