【jQuery】繰り返し（ループ）処理をしたいのときに使うeachメソッド

htmlのタグに対してループさせて処理させたいときがあると思います。

そんなときに使えるがeachメソッドです。

eachメソッドの使い方

たとえば下記のようなhtmlがあるとします。

html

<ul>
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
</ul>

<li>タグに対してループして処理をさせたい場合にはjQueryを使って下記のように記述します。

基本文法

jQueryオブジェクト.each(function(index) {
	～処理を記述～
});

サンプル

jQuery('li').each(function(index) {
	～処理を記述～
});

配列やオブジェクトにたいしてループさせる方法

配列に入れた値をhtmlとして一つ一つ出力する

まず出力させる場所に空のタグをおきます。

<div></div>

次に配列に値を入れてそのあとeachでループをさせます。

ループごとに配列に入っている値をhtmlとして出力していきます。

//配列
var array = ['もも','ぶどう','みかん'];
$.each(array, function(index, value) {
	jQuery('div').append('<p>' + index + ':' + value + '</p>');
	console.log(index + ':' + value);
 
})

配列を終わらせる方法

配列を途中で終わらせたい場合には「return false」を使うことで配列を終わらせることができます。

html

まずNo.1からNo.6までのspanタグで囲まれた要素があります。

<p>
	<span>No.1</span>
	<span>No.2</span>
	<span>No.3</span>
	<span>No.4</span>
	<span>No.5</span>
	<span>No.6</span>
</p>

下記は、No.3までにスタイルを適用してそれ以降はループを終了させるという方法になります。

var count = 0;
jQuery('p > span').each(function(index) {
	if(count < 3){
		jQuery(this).css('font-weight', 'bold');
	}else{
		return false
	}
	count++;
});

サンプル