Javascriptで、数値の一番高い要素に色をつける

JSでhtmlの任意の列の中(以下のコードではhogeがそれです)で、一番数値の高い要素に色をつけたいと思っておりますが、MAX値を取るところまでは出来たのですがそこから先が出来ません。

$(.'hoge').each(function(){
  var value = parseInt(($this).text());
  ###ここでMaxとvalueと比較する処理が入る?
}

このような処理になるかと思いますが、JSの知識がないためどうすればいいかわからず、ご教示いただければ幸いです。

kei344

2016/11/23 06:19

具体的にHTMLおよびMAXを取得するJavaScriptなどを質問文に追記いただいたほうが回答を得られやすいと思います。

行動規範の内容に同意します

回答2件

var max = parseInt($(this).eq(0).text());
$('.hoge').each(function()
{
	var value = parseInt($(this).text());
  
  if (max < value) max = value;
});

質問者さんの方法でやればこれでできます。

var array = $('.hoge').map(function()
{
	return parseInt($(this).text());
}).get();

var max = Math.max.apply(null, array);

こちらの方法でもできます。

投稿2016/11/23 06:26

編集2016/11/23 12:45

Takamoso

総合スコア248

ベストアンサー

次の2回のループがわかりやすいやり方と思います。

・最大値を求めるだけ
・求まった最大値の要素を探し、色をつける

parseIntの第２引数は10を指定した方が良いです。
数値が0で始まっているときに8進数と解釈されることを防ぎます。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title></title>
6<style>
7.highlighted {
8  color: red;
9}
10</style>
11<script type="text/javascript" src="jquery-2.1.4.js"></script>
12<script type="text/javascript">
13$(function() {
14	var max = -Infinity; // 負の無限大
15
16	// 最大値を求めるだけ
17	$('.hoge').each(function() {
18		max = Math.max(max, parseInt($(this).text(), 10));
19	});
20
21	// 求まった最大値の要素を探し、'highlighted'クラスを追加して色をつける
22	$('.hoge').each(function() {
23		if (max == parseInt($(this).text(), 10)) {
24			$(this).addClass('highlighted');
25		}
26	});
27});
28</script>
29</head>
30<body>
31<div class="hoge">2</div>
32<div class="hoge">5</div>
33<div class="hoge">99</div>
34<div class="hoge">1</div>
35<div class="hoge">4</div>
36<div class="hoge">-999</div>
37<div class="hoge">1</div>
38<div class="hoge">99</div>
39<div class="hoge">3</div>
40</html>