根据HTML文本设置宽度

Question

如何根据.layer-info内的值将宽度设置为.score-java？十进制数应该是整数= 9.8将是98％，9将是90％等。这是HTML代码：

<div class="layer">
    <div class="layer-info">Result</div>
</div>
<span class="score-java">9.8</span>

这是我的jQuery代码

/*review score*/
$(".score-java").text();
$(".score-java").siblings(".layer").children();

Codepen在这里：http://codepen.io/anon/pen/XdXNLJ?editors=1010

编辑： 什么是多个.layer的解决方案？

Answer 1

使用parseFloat()来解析得分：

var score = $(".score-java").text();
$(".layer-info").css('width', parseFloat(score) * 10 + '%');

http://codepen.io/anon/pen/yOegYm?editors=1010

Answer 2

您需要检索.score-java元素的文本值，然后将其乘以10以获取宽度的百分比值并将其应用于同级.layer。试试这个：

var width = parseFloat($(".score-java").text() || 0) * 10;
$(".score-java").prev(".layer").find('.layer-info').width(width + '%');

Working example

Answer 3

将元素.score-java中的文本保存到变量中：

var value = $(".score-java").text();

并将其作为css分配给元素.layer-info：

$(".layer-info").css("width", value*10 + "%");