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

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

Answer 1

尝试

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

演示：小提琴

Answer 2

您可以使用该.each函数来处理每个.bar元素，您可以使用jquery的 .data 函数来获取 data-* 属性而不是.attr函数

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

Answer 3

替换你的jQuery代码：

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

Answer 4

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