jQueryで配列の値をidのセレクタに使う方法

質問

以下のようなjQueryのソースで、配列Xに入れた文字列A,B,Cがidの要素について、配列を介さずにCSSでcolorをredにしようとしたとき、そのまま書けば、『$('#A, #B, #C').css('color', 'red');』だと思うのですが、配列X[0],X[1],X[2]の表記を利用して、セレクタを指定するにはどうすればよいでしょうか。

具体的には、
『$('#'+X[0]).css('color', 'red');
$('#'+X[1]).css('color', 'red');
$('#'+X[2]).css('color', 'red');』

というコードを、cssを3回指定せずに、1回で済ませたいということです。

[jQueryソース]

$(function(){

<p id='A'>1</p>
<p id='B'>2</p>
<p id='C'>3</p>

X = [];
X[0] = 'A';
X[1] = 'B';
X[2] = 'C';

$('#A, #B, #C').css('color', 'red');

});

回答No.2

tracer · ベストアンサー

No.1さんの回答がスマートですね。
私の回答はスマートではないですが、いろいろやり方はあるということで。

$("#"+X.join(",#")).css("color","red");

ただ、配列演算子を使いたいという質問にも受け取れるので、その場合は、ループで回すほうがスマートですね。一回で済ますという意味ではなくなりますが。

for(var i in X) $("#"+X[i]).css("color","red");

配列内のID名に対してcolor:redを設定するという意味合いにおいては、結果はどちらも同じです。

お礼

色々やり方があるんですね。
元々、配列演算子を使いたいという質問でした。
わかりにくくて、すみません。
ABCを直接入力するのではなく、配列から値を得たかったのですが、mapだとちょっとうまくいかなかったので、
>$("#"+X.join(",#")).css("color","red");
というやり方が、スマートかなと思ったので、そちらを使わせていただきました。
また、2つ目のループで回すやり方もうまくいきました。
ありがとうございました。

回答No.1

think49

jQuery.map() を使ってください。
http://api.jquery.com/jQuery.map/

jQuery.map(['A', 'B', 'C'], function (value) { return '#' + value; }).join(); // "#A,#B,#C"

# Re: h_mpさん

お礼

jQueryのmap()とJavaScriptのjoin()を使うのですね。
こういったやり方知らなかったので、とても勉強になりました。
ありがとうございました。