条形宽度的Javascript百分比计算答案

【问题标题】：Javascript percentage calculation for bar width条形宽度的Javascript百分比计算
【发布时间】：2013-03-04 02:17:11
【问题描述】：

我需要计算当前值的百分比以将其附加到条形宽度：

<div class="bar"><span class="bar-inside" data-value="120"></span></div>
<div class="bar"><span class="bar-inside" data-value="1320"></span></div>
<div class="bar"><span class="bar-inside" data-value="670"></span></div>

我需要找到 100% 的最大值（在本例中为 1320），并根据该值计算其他条形宽度的百分比。

谢谢！

【问题讨论】：

你能创建一个 jsFiddle 来帮助我们吗
只需循环遍历您的 div，获取最大值..然后计算 %

标签： javascript jquery percentage

【解决方案1】：

应该这样做：(fiddle)

var max = 0; 

$('.bar-inside').each(function(){ max = Math.max(max, $(this).data("value")); });

【讨论】：

应该是$('.bar span') 吗？
以及如何根据最大值将所有值转换为 %？

【解决方案2】：

var max = -Infinity;

var maxEle = $(".bar").each(function() {
    if (+this.attr('data-value') > max) +this.attr('data-value', max) ;
}).filter(function() {
    return this.attr('data-value') == max;
});


if (maxEle.length > 1) maxEle = maxEle.eq(Math.floor(Math.random() * maxEle.length));

【讨论】：

【解决方案3】：

使用map 函数，然后使用Math.max。

var values = $.map($("span.bar-inside"), function(el, index) { return parseInt($(el).data('value')); });
var max = Math.max.apply(null, values);

上面将输出1320，这是预期的结果。

【讨论】：

【解决方案4】：

var max = 0;
$('.bar').each(function() {
    max = Math.max(max, $('.bar-inside', this).data('value'));
})
.css('width', function() {
    return ($('.bar-inside', this).data('value') * 100 / max) + '%';
});

http://jsfiddle.net/8nmhY/

【讨论】：

简单干净。谢谢！