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's值，例如40，并将其作为 CSS 样式传递，例如width: 40%，但它仅采用第一个.bar的属性，并将相同的宽度应用于所有其他元素。我希望它为每个属性获取属性，并为每个属性分配宽度。

Answer 1

尝试

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

演示：Fiddle

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

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

4 个答案: