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

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

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