value属性の値によって要素に新しいクラスを追加したい

Question

###現在の状況、問題
現在配列menu_iconに５つの数字が格納されており、
その数字をwrapクラスの中のiconクラスに順にvalue属性の値として格納する所まではできました。

valueの値が1以上200以下ならicon_bg_redクラスを追加し、
201以上400以下ならicon_bg_blueクラスを追加し、
401以上ならicon_bg_greenクラスを追加するというif文をeach文の中に記述しているのですが、
現在全ての要素にicon_bg_redが追加されている状況です。

おそらくif文はあっていると思うので、each文の所かiconクラスを個別に処理していないのではないかと思います。

###実現したいこと
value属性の値によってiconクラスに要素の背景色を個別に変えるクラスを追加したいです。
jsfiddleにソースコードをアップしています。

https://jsfiddle.net/ululami/gve3mgmb/4/

ご回答宜しくお願い致します。

###該当のソースコード

$(function() {
  menu_icon = [];
  menu_icon.push(200, 300, 100, 500, 400);

  var num = 1;
  var name = '';

//iconクラスのvalue属性に配列の数字を個別に格納
  $.each(menu_icon, function(i, val) {
    name = String('.icon' + num);
    $(name).attr('value', val);
    num++;
  });
//ここまでは上手く動作しました。

  $('.icon').each(function() {
    var iconVal = $('.icon').attr('value');
    if (iconVal <= 200 && iconVal >= 1) {
      $('.icon').addClass('icon_bg_red');
    } else if (iconVal <= 400 && iconVal >= 201) {
      $('.icon').addClass('icon_bg_blue');
    } else if(iconVal >= 401){
      $('.icon').addClass('icon_bg_green');
    }
  });
});

<div class="wrap">
  <div class="icon icon1">icon１</div>
  <div class="icon icon2">icon２</div>
  <div class="icon icon3">icon３</div>
  <div class="icon icon4">icon４</div>
  <div class="icon icon5">icon５</div>
</div>

.icon {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  border: 2px solid #000;
  text-align: center;
  line-height: 48px;
  margin: 20px;
  box-sizing: border-box;
  font-size: 12px;
}

.icon_bg_red {
  background: crimson;
}

.icon_bg_blue {
  background: steelblue;
}

.icon_bg_green {
  background: seagreen;
}

###補足情報(言語/FW/ツール等のバージョンなど)
jqueryのバージョンは2.2.4です。

Answer 1

$('.icon').each(function() {
  var iconObj = $(this); // 各要素に処理を行う。
  var iconVal = iconObj.attr('value');
  if (iconVal <= 200 && iconVal >= 1) {
    iconObj.addClass('icon_bg_red');
  } else if (iconVal <= 400 && iconVal >= 201) {
    iconObj.addClass('icon_bg_blue');
  } else if(iconVal >= 401){
    iconObj.addClass('icon_bg_green');
  }
});

Comments

[owl]

返信遅れて申し訳ありません。
無事に希望通りに動きました。
本当にありがとうございます。

Answer 2

まず気になった点として、最初のループ内のname = String('.icon' + num);で、numはループ内で動かないので、ずっと同じ要素へのアクセスを続けています。

あと、<div>にvalue属性はありませんので、data-始まりにするか、$.dataを使うかをした方がいいと思います。

Comments

[owl]

ご返信が遅れて申し訳ありません。
一つ質問があるのですが、numがループ内で動かなく同じ要素にアクセスし続けるとのことですが、
これはブラウザに負荷がかかるということでしょうか。

よろしくお願いいたします。