jQuery.eachの多重ループから抜け出す方法

2023-06-29

入れ子になったjQuery.each()から抜け出す方法を2通りご紹介します｡

いずれにせよちょっと工夫が必要そう｡

変数を使った方法

jQuery.each()を抜け出すには「break」ではなく「return false」を使用しますが､それを逆手に取った(？)方法｡

let flag = true; //変数を定義
$(elements).each(function(){
	$(this).find(element).each(function(){
		if(a == b){ //抜け出す条件
			flag = false; //flagを「false」に
			return flag; //return false
		}
	});
	return flag; //return false
});

抜け出すときに､変数「flag」の値を「false」にして多重ループを抜け出します｡

抜け出さないときは「return true」をしていることになり､処理が続行されます｡

try～catch文を使った方法

まずは完成形をご覧ください｡

try{
	$(elements).each(function(){
		$(this).find(element).each(function(){
			if(a == b){ //抜け出す条件
				throw "break"; //例外を発生させる
			}
		});
	});
}catch(e){
	//抜け出したときに処理をしたければなにか書く
}

JavaScriptの try～catch文を使って､抜け出すときに例外(エラー)を発生させ､処理を終了させています｡

これでも正しく動作することを確認しました｡

多重ループがあまりにも多重な場合や

//あまりにも多重ループ
$(elements).each(function(){
	$(this).find(element).each(function(){
		$(this).find(elemen).each(function(){
			$(this).find(eleme).each(function(){
				if(a == b){
					flag = false;
					return flag;
				}
			});
			return flag;
		});
		return flag;
	});
	return flag;
});

抜け出す条件などが複雑なときは､try～catch文のほうが向いてるかなと思います｡

$(elements).each(function(){
	$(this).find(element).each(function(){
		if(a == b){ //抜け出す条件①
			flag = false; //flagを「false」に
			return flag; //return false
		}

		if(c == d){ //抜け出す条件②
			flag = false; //flagを「false」に
			return flag; //return false
		}
	});
	return flag; //return false
});