【jQuery】配列の中にある値とdiv要素のidの値が一致する場合、div要素に特定のクラス名を付与したい

■ 最終的なゴール

Ajaxを用いてAPI(カラーミーショップ)で情報を取得し、APIで取得した情報と一致する値を持つp要素がある場合、p要素に特定のクラス名を付与したい。

■ そのためにやりたいこと

配列の中の情報と、情報と一致するidを持つp要素に特定のクラス名を付与したい。

■　現在

上記を実行するために、jQueryで適当な配列を作り、idを付与したdiv要素を並べ、配列の中身とp要素のidが一致した場合、p要素にpinkクラスを付与するというコードを書いていたのですが、つまづきました。

配列に"100"と"300"があるため、下記2つのpタグにpinkクラスを付与したいです。

html
1<body>
2	<style type="text/css">
3		.pink {
4			color:pink;
5		}
6	</style>
7	<p id="100" class="itembox">あああ</p>
8	<p id="200" class="itembox">いいい</p>
9	<p id="300" class="itembox">ううう</p>
10	<p id="400" class="itembox">えええ</p>
11	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
12	<script type="text/javascript">
13		$(function() {
14
15			var check = $('p.itembox');　// itemboxクラスを持つpタグを取得
16			var numbers = [ 100, 150, 245, 300, 415 ];
17			var b = $.grep(numbers, function(e){ return e; });
18
19			$(check).each(function (i) {
20				var checkid = $(this).attr('id');
21				if (checkid == b) {
22					$(this).addClass('pink');
23				}
24			});
25		});
26	</script>
27</body>

■　試したこと

inArrayも試しましたが、"0"または"-1"という値しか返ってこなかったため、諦めました。

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

回答2件

html
1<script type="text/javascript">
2        $(function() {
3            var check = $('p.itembox');　// itemboxクラスを持つpタグを取得
4            var numbers = [ 100, 150, 245, 300, 415 ];
5            for (var i = 0; i<numbers.length; i++) {
6                $('p.itembox#' + num).addClass('pink');
7            }
8        });
9</script>

投稿2019/12/08 15:33

退会済みユーザー

総合スコア0

kei344

2019/12/08 15:40

num ⇒ numbers[i] では？

退会済みユーザー

2019/12/08 17:52

あ、、、

退会済みユーザー

2019/12/08 18:35

回答いただき、誠に有難うございます。また、kei344様も修正していただき、有難うございます。どちらも甲乙つけがたかったのですが、先に回答していただいた方をベストアンサーとさせていただきました。

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

ベストアンサー

$.inArrayの戻り値は、

含まれている場合はその位置
含まれていない場合は-1

を戻します。なので、以下のようなコードで判定できます。

javascript
1$(function() {
2
3  var check = $('p.itembox'); // itemboxクラスを持つpタグを取得
4  var numbers = [100, 150, 245, 300, 415];
5  
6  $(check).each(function(i, elm) {
7    //下記のままだと、型不一致(elm.idは文字列型　numbersは数値型)で、すべてfals判定になってしまいます
8    //if ($.inArray(elm.id, numbers)!=-1) $(elm).addClass('pink');
9
10    //elm.idが数値変換可能であることを条件として、下記で判定可能です
11    if ($.inArray(elm.id-0, numbers)!=-1) $(elm).addClass('pink');
12
13    //もしくは、以下のように、numbers側を文字列の配列に切り替えましょう
14    //var numbers = [100, 150, 245, 300, 415].map(function(n){ return n+''});
15
16  });
17});