3流プログラマのメモ書き

元開発職→社内SE→派遣で営業支援→開発戻り浦島太郎状態の三流プログラマのIT技術メモ書き。このメモが忘れっぽい自分とググってきた技術者の役に立ってくれれば幸いです。

2012-11-18

(jQuery)同じクラス名のオブジェクトを一斉操作

Webがらみ

jQueryでは、セレクタとして #id名を使うことが多いかもしれませんが、クラスを指定することも出来ます。

クラスは .クラス名で指定すると、そのクラス名のものを配列として扱います。

以下のようなクラス名 test,test2 を持つDIV要素とinputボタンがあるとします。

 type="button" id="chgcolor" value="色チェンジ" >
 
 id="test01" class="test">aaa

id="test02" class="test">bbb

id="test03" class="test">ccc

id="test04" class="test2">eee

inputボタンを押下すると、testのクラス名のDIVの文字色を赤に変えるという操作をするには、jQueryを使うと以下のように出来ます。

$(function(){
 $("#chgcolor").click(function(){ //inputボタン押下時のイベントハンドラ
   //testクラスを持つ要素をループ
   $(".test").each(function(){
     //文字色変更
     $(this).css("color", "red");
   });
 
   /* 以下のようにもできる。
   var selcts = $(".test");
   for ( var i=0 ; i
     //文字色変更
      $(selcts[i]).css("color", "red");
   }*/
  });
});