2018-09-08

jQueryの.each()を用いたループを抜ける方法

.each()を用いたループはbreakでは抜けられない

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

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

breakではなくreturnを使う

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

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を好んで使っていました。for文よりシンプルで直観的な感じがあって好きなんですよね。今まで意識してなかったということはbreakしたことがなかったんでしょうか。