jquery eachメソッド

TOPページに戻る > jquery入門

スポンサード リンク

jquery each()メソッド

eachメソッドは、セレクタで指定した要素に繰り返し処理を実行します

$("セレクタ").each(function(){
	繰り返し処理
});

指定したHTML要素をクリックしたときにイベントを実行する

ボタンをクリックすると繰り返し処理でカラフルな文字に変更されます
1回処理するごとに変数numにインクリメントで1つずつ数字を足しています
足した数字はattr()で属性の値の名前と連結させます
最初のif(num<6){はnumが5以下の場合のみ繰り返し処理をするようにしました

jquery

$(function() {
var num = 1;
$("button").click(function () {
	if(num<6){
	$('#hoge span').each(function(){
		$(this).attr("id","hoge"+num);
		num++;
		});
	}
	});
});

html

<div id="hoge">
<span>テキスト1</span>
<span>テキスト2</span>
<span>テキスト3</span>
<span>テキスト4</span>
<span>テキスト5</span>
</div>

css

#hoge1{ 
 color: red;
 }
#hoge2{
 color: orange;
 }
#hoge3{
 color: pink;
 }
#hoge4{
 color: lime;
 }
#hoge5{
 color: blue;
 }

サンプル

テキスト1 テキスト2 テキスト3 テキスト4 テキスト5

実行後のhtml

<span id="hoge1">テキスト1</span>
<span id="hoge2">テキスト2</span>
<span id="hoge3">テキスト3</span>
<span id="hoge4">テキスト4</span>
<span id="hoge5">テキスト5</span>






(C)2012 ホームページ作成無料