使用多个元素的内容作为宽度

Question

我对jquery比较新，我在这方面遇到了麻烦：

我的参赛作品是：

<div class="number">30</div>
<div class="number">80</div>
<div class="number">10</div>
<div class="number">20</div>
<div class="number">90</div>

我需要输出：

<div class="number" style="width:30%;">30</div>
<div class="number" style="width:80%;">80</div>
<div class="number" style="width:10%;">10</div>
<div class="number" style="width:20%;">20</div>
<div class="number" style="width:90%;">90</div>

我尝试使用.html（）,. text（），parseInt和each（）

进行多项操作

Answer 1

您可以使用回调返回所需宽度的回调（在您的情况下是元素内的文本）作为 .css() 函数的第二个参数：

$('.number').css('width', function() {
    return $(this).text() + '%';
});

Answer 2

你可以这样做：

$(".number").each(function() {
    var num = parseInt( $(this).text(), 10 );
    $(this).css("width", num + "%");
});