1

私はこの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's現在、data-percent 属性の最初の値 (例: 40) を取得し、それをCSSスタイル (例: ) として渡していwidth: 40%ますが、最初の .bar の属性のみを取得し、他のすべての要素に同じ幅を適用しています。それぞれの属性を取得し、それぞれに幅を割り当てたいと思います。

4

4 に答える 4

5

試す

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

デモ:フィドル

于 2013-08-17T16:06:28.200 に答える
1 
$('.bar').each(function() {
var width = $(this).data("percent");
$(this).find('div').css("width",width+"%");
});
于 2013-08-17T16:29:25.377 に答える
1

jQuery コードを次の場所に置き換えます。

$('.bar > div').css('width', function(){
    return $(this).parent().data('percent') + '%'
});
于 2013-08-17T16:07:39.167 に答える