jQuery の each 関数を使用して、条件抽出した要素に対して繰り返し処理を行うサンプルスクリプトを掲載しています。
スポンサーリンク
HTML
ここで掲載しているサンプルでは以下の HTML を使用しています。
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- jQuery ライブラリの読み込み -->
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<!-- 今回のサンプルコード -->
<script type="text/javascript" src="test.js"></script>
<title>jQueryテスト - each関数サンプル</title>
</head>
<body>
<!-- このボタンをクリックするとテーブルの背景色が白になる -->
<input id="bid" type="button" value="テーブルの背景色を白くする" />
<table>
<tr>
<th>名前</th><th>好きな色</th><th>嫌いな果物</th>
</tr>
<tr id="tr1" style="background-color:red;">
<td>チョチョリーナ・バンビーナ</td><td>赤</td><td>りんご</td>
</tr>
<tr id="tr2" style="background-color:blue;">
<td>悟空</td><td>赤</td><td>なし</td>
</tr>
<tr id="tr3" style="background-color:gray;">
<td>スネ夫</td><td>緑</td><td>バナナ</td>
</tr>
</table>
</body>
</html>
each 関数のサンプルスクリプト
HTML 要素を条件抽出して、繰り返し処理を行うサンプルになります。上記 HTML で取り込んでいる test.js にあたります。詳細はサンプル内のコメントを参照ください。
test.js
$(function () {
/*
* inputボタンがクリックされた時のイベントハンドラ―を追加する
*/
$("input#bid").click(function(){
/*
* １．$("tr[id ^= tr]")でidがtrで始まるtrタグをすべて取得している（前方一致）
* ２．取得したすべてのtrタグに対してfunctionをeach関数で実行している
*/
$("tr[id ^= tr]").each(function(){
/*
* １．$(this)は取得されたTRタグ１つずつを指している
* ２．css関数を使用して背景色を変更している
* css関数はstyle属性やclass属性などで指定されたいずれの場合にも対応している
*/
$(this).css("background-color", "white");
});
});
});