配列の最大値を使用して幅を設定するにはどうすればよいですか？

debugcn 投稿 Dev

ダンボ

写真のような出力をレンダリングしようとしています

現在、すべての数値を配列に渡そうとしています。次に、灰色のバーの長さをそれらの値の最大値に設定します。これはこれまでのところですが、値を渡していません。

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>

Tha'er M. Al-Ajlouni

まず、あなたはのセレクタのドット欠けている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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-05-29

コメントを追加

サインイン

分類Dev

Related 関連記事

記事

配列の最大値を使用して幅を設定するにはどうすればよいですか？

配列の最大値を使用して幅を設定するにはどうすればよいですか？

foreach内の値を取得して親配列に設定するにはどうすればよいですか？

memsetを使用して配列の最大値を入力するにはどうすればよいですか？

vbaを使用して色の配列を設定するにはどうすればよいですか？

「fill_parent」値を要素の幅として設定するにはどうすればよいですか？

VaadinでJavaを使用してListBoxの幅を設定するにはどうすればよいですか？

CSSグリッド列の幅と最大幅を設定するにはどうすればよいですか？

mogrifyを使用して、最大寸法の特定のピクセル値をターゲットにするにはどうすればよいですか。垂直の場合は高さを「x」に設定し、水平の場合は幅を「x」に設定します。

iomanipを使用してstd :: stringの最大フィールド幅を設定するにはどうすればよいですか？

2つの配列を使用してチェックボックスの値をtrueに設定するにはどうすればよいですか？

JavaScript / jQueryを使用して！importanatで可変幅を設定するにはどうすればよいですか？

Flutterでウェイトを使用して幅を設定するにはどうすればよいですか？

MYSQLで列の最大値を設定するにはどうすればよいですか？

UILocalNotificationを使用してNSDictionaryに複数の値を設定するにはどうすればよいですか？

HashMapを使用してArrayListに複数の値を設定するにはどうすればよいですか？

子の幅に基づいてdivの幅を設定するにはどうすればよいですか？

SQL Serverで行の値を列として設定するにはどうすればよいですか？

CHVRSNの重複を除外し、CHVRSNの最大値を設定するにはどうすればよいですか？

Rマークダウンを使用してRDTテーブルの列幅を明示的に設定するにはどうすればよいですか？

CSSを使用して、要素全体の幅ではなく、テキストの幅に背景色を設定するにはどうすればよいですか？

配列内の数値範囲の表示値を設定するにはどうすればよいですか？

jQueryを使用してDropDownListの値を設定するにはどうすればよいですか？

xWebConfigKeyValueを使用して複数のAppSettings値を設定するにはどうすればよいですか？

分度器を使用して設定値の名を取得するにはどうすればよいですか？

セッターを使用して、プライベート配列である属性に値を設定するにはどうすればよいですか？

軸に沿ってargmaxを使用して、numpy 2D配列の各列の最大値を取得するにはどうすればよいですか？

Boostrap 4とHTMLヘルパーを使用してHTMLテーブルの列幅を設定するにはどうすればよいですか？

フォーマット指定子を使用して文字列のフィールド幅を設定するにはどうすればよいですか？

PySide-PyQt：QTableWidgetの列幅を使用可能なスペースの比率として設定するにはどうすればよいですか？

関数の戻り値に基づく値を使用してPythonで新しい列を設定するにはどうすればよいですか？