2018-09-08

jQueryの.each()を用いたループが抜けられない！？ breakではなくreturnで抜ける

jQuery.eachを使ってループ処理を行う際、処理を抜けたい場合にうまくループを抜けられないことがあります。

jQueryを使用せずに、javascriptのfor文などのループから抜ける場合は、break;を使い処理を抜けます。しかし、jQueryの.each()でbreakを使用するとうまく動作せず、エラーが表示されてしまいます。

解決方法を調べてみました。

ループを抜けるには、breakではなくreturnを使う

javascriptのループ例

for (var i = 0; i < 10; i++) {
	if (i == 7) {
		// ループから抜ける
		break;
	}
}

jQueryのeachでループを抜けるにはreturn = false;を使いましょう。ちなみにcontinueの場合はreturn = true;を使用すること。

jQueryのループ例

var obj = {1:"tokyo", 2:"osaka", 3:"kyoto", 4:"tottori", 5:"fukuoka"};

$.each(obj, function(i, value){
	if (value == "tottori") {
		// breakに相当
		return false;
	} else {
		// continueに相当
    	return true;
	}
});

まとめ

配列やオブジェクトでループする際には、jQueryのeachを好んで使っています。javascriptのfor文よりもシンプルで、直感的な感じがあって好きなんですよね。

今まで問題にならなかったということは、breakしたことがなかったんでしょうか…。今後は意識してみます。