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

首先，您在<h1 class="text-center" style="font-family: "Arial";"> My Site </h1>中的facet-amount选择器中缺少点var contentValues = $('facet-amount').text();。

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

请参阅以下示例：

＆＃13;

max

＆＃13;

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);

＆＃13;

.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;
}

＆＃13;

但是看一下你的形象，我认为你的意图是将<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>中的每一个设置为其值，而不是最大值，将其视为建议：

＆＃13;

facets

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

Answer 2

您在类选择器中缺少.，而且您的parseInt也不正确，它只能在数组的第一个元素上运行。

试试这个：

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

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

Answer 3

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

您必须创建一个数组：

var arr = []; //empty array

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

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

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

3 个答案: