如何使用数组的最大值设置宽度？

Question

我试图呈现像在图像输出

现在，我想所有的数字值传递到一个数组，然后设置灰色条的长度，以该最大的价值 这是我迄今为止，但它不传递任何值：

var contentValues = $('facet-amount').text(); 
 
var arr = parseInt(contentValues); 
 
$(".facet-percentage").width(Math.max(...arr));

.facet { 
 
    position: relative; 
 
    border: 1px solid #dcdcdc; 
 
    margin-top: 13px; 
 
} 
 
.facet-title { 
 
    display: inline-block; 
 
} 
 
.facet-amount { 
 
    display: inline-block; 
 
    position: absolute; 
 
    right: 2px; 
 
} 
 
.facet-percentage { 
 
    background-image: -webkit-linear-gradient(top, #f8f8f8, #e5e5e5); 
 
    display: inline-block; 
 
    height: 10%; 
 
    position: absolute; 
 
    z-index: -1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="content-type-facet" class="facet"> 
 
    <div class="facet-header"> 
 
    <h3>Content Type</h3> 
 
    </div> 
 
    <div> 
 
    <span class="facet-percentage" style=""></span> 
 
    <span class="facet-title">Chapter</span> 
 
    <span class="facet-amount">400</span> 
 
    </div> 
 
    <div> 
 
    <span class="facet-percentage" style=""></span> 
 
    <span class="facet-title">Article</span> 
 
    <span class="facet-amount">200</span> 
 
    </div> 
 
    <div> 
 
    <span class="facet-percentage" style=""></span> 
 
    <span class="facet-title">Reference Work Entry</span> 
 
    <span class="facet-amount" id='ciao'>207</span> 
 
    </div> 
 
    <div> 
 
    <span class="facet-percentage" style=""></span> 
 
    <span class="facet-title">Protocol</span> 
 
    <span class="facet-amount">16</span> 
 
    </div> 
 
    <div> 
 
    <span class="facet-percentage" style=""></span> 
 
    <span class="facet-title">Book</span> 
 
    <span class="facet-amount">2</span> 
 
    </div> 
 
</div>

Answer 1

首先，您在var contentValues = $('facet-amount').text();的facet-amount选择器中缺少点，应该是var contentValues = $('.facet-amount').text();。

其次，$('.facet-amount').text();不会返回数组，而是返回匹配该选择器的第一个元素的text，在您的情况下为400。要选择所有需要使用$.each的值作为示例，填充阵列后，可以使用max函数。

请参阅以下为例：

var arr = []; 
 
$.each($('.facet-amount'), function(index, value) { 
 
    arr[index] = parseInt($(value).text()); 
 
}); 
 
var max = Math.max(...arr); 
 
console.log(max); 
 
$(".facet-percentage").width(max);

.facet { 
 
    position: relative; 
 
    border: 1px solid #dcdcdc; 
 
    margin-top: 13px; 
 
} 
 
.facet-title { 
 
    display: inline-block; 
 
} 
 
.facet-amount { 
 
    display: inline-block; 
 
    position: absolute; 
 
    right: 2px; 
 
} 
 
.facet-percentage { 
 
    background-image: -webkit-linear-gradient(top, #f8f8f8, #e5e5e5); 
 
    display: inline-block; 
 
    height: 10%; 
 
    position: absolute; 
 
    z-index: -1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="content-type-facet" class="facet"> 
 
    <div class="facet-header"> 
 
    <h3>Content Type</h3> 
 
    </div> 
 
    <div> 
 
    <span class="facet-percentage" style=""></span> 
 
    <span class="facet-title">Chapter</span> 
 
    <span class="facet-amount">400</span> 
 
    </div> 
 
    <div> 
 
    <span class="facet-percentage" style=""></span> 
 
    <span class="facet-title">Article</span> 
 
    <span class="facet-amount">200</span> 
 
    </div> 
 
    <div> 
 
    <span class="facet-percentage" style=""></span> 
 
    <span class="facet-title">Reference Work Entry</span> 
 
    <span class="facet-amount" id='ciao'>207</span> 
 
    </div> 
 
    <div> 
 
    <span class="facet-percentage" style=""></span> 
 
    <span class="facet-title">Protocol</span> 
 
    <span class="facet-amount">16</span> 
 
    </div> 
 
    <div> 
 
    <span class="facet-percentage" style=""></span> 
 
    <span class="facet-title">Book</span> 
 
    <span class="facet-amount">2</span> 
 
    </div> 
 
</div>

但看你的形象，我觉得你的意图是设置facets到它的价值，而不是最大的每一个总之，认为这是一个建议：

$('.facet-amount').each(function(index, element) { 
 
    var $el = $(element); 
 
    $el.siblings(".facet-percentage").width(parseInt($el.text())); 
 
});

.facet { 
 
    position: relative; 
 
    border: 1px solid #dcdcdc; 
 
    margin-top: 13px; 
 
} 
 
.facet-title { 
 
    display: inline-block; 
 
} 
 
.facet-amount { 
 
    display: inline-block; 
 
    position: absolute; 
 
    right: 2px; 
 
} 
 
.facet-percentage { 
 
    background-image: -webkit-linear-gradient(top, #f8f8f8, #e5e5e5); 
 
    display: inline-block; 
 
    height: 10%; 
 
    position: absolute; 
 
    z-index: -1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="content-type-facet" class="facet"> 
 
    <div class="facet-header"> 
 
    <h3>Content Type</h3> 
 
    </div> 
 
    <div> 
 
    <span class="facet-percentage" style=""></span> 
 
    <span class="facet-title">Chapter</span> 
 
    <span class="facet-amount">400</span> 
 
    </div> 
 
    <div> 
 
    <span class="facet-percentage" style=""></span> 
 
    <span class="facet-title">Article</span> 
 
    <span class="facet-amount">200</span> 
 
    </div> 
 
    <div> 
 
    <span class="facet-percentage" style=""></span> 
 
    <span class="facet-title">Reference Work Entry</span> 
 
    <span class="facet-amount" id='ciao'>207</span> 
 
    </div> 
 
    <div> 
 
    <span class="facet-percentage" style=""></span> 
 
    <span class="facet-title">Protocol</span> 
 
    <span class="facet-amount">16</span> 
 
    </div> 
 
    <div> 
 
    <span class="facet-percentage" style=""></span> 
 
    <span class="facet-title">Book</span> 
 
    <span class="facet-amount">2</span> 
 
    </div> 
 
</div>

Answer 2

在你的代码中arr有一个数字类型。

您必须创建一个数组：

var arr = []; //empty array 

$('facet-amount').each(function(){ 
    arr.push(parseInt($(this).text())); 
} 

$(".facet-percentage").width(Math.max.apply(null, arr)); 

Answer 3

你错过了在类选择的.，也是你的parseInt函数不正确，则只会在数组的第一个元素上工作。

试试这个：

var maxValue = Math.max.apply(null, $('.facet-amount').map(function(){return +$(this).text();}).get()); 
$(".facet-percentage").width(maxValue); 

演示 https://jsfiddle.net/LoLgz6wv/