for文をbreak文で抜けようとするとエラーが発生する

Question

下記のようなプログラムで、for文を抜けようとするとエラーが発生しました。

const $target = $('.target');
const list: string[] = ['hoge', 'fuga', 'piyo'];

for (let i = 0; i < list.length; i++) {
  $target.each((index, elm) => {
    const text = $(elm).text();
    if (text === list[i]) {
      result = index;
      break;// ジャンプ先は関数の境界を越えることはできません。ts(1107)
    }
  });
}

フラグ変数を使い、break文をforの直下にすればエラーを回避できましたが、なぜ上記のbreak文ではエラーが発生するのでしょうか。

const $target = $('.target');
const list: string[] = ['hoge', 'fuga', 'piyo'];

let flag = false;
for (let i = 0; i < list.length; i++) {
  $target.each((index, elm) => {
    const text = $(elm).text();
    if (text === list[i]) {
      result = index;
      flag = true;
    }
  });
  if (flag) break;
}

Answer 1

外側のforを内側のeachのコールバックから抜けることはできません

もしそうではなく
eachを中断するだけならreturn false、continueしたいならreturn true
してください

Comments

[toromou]

今回の質問は外側のforを内側のjQuery.eachのコールバックから抜けたい、ということですね。
言葉足らずで申し訳ございません。

同じような回答をされている方がいらっしゃいますが、
より詳しかったのでこちらをベストアンサーにさせていただきます。

[yambejp]

もしどうしても二重ループの内側から外側のforをbreakしたいなら
内側もforで回すことです

<script>
$(function(){
hoge:
for(var i=0;i<5;i++){
for(var j=0;j<$('div').length;j++){
console.log($('div').eq(j).text());
if(i>=1 && j>=1) break hoge;
}
}
});
</script>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>e</div>

[toromou]

ご親切にありがとうございます。
参考にさせていただきます。

Answer 2

そのbreakは関数の中ですね。
たんに、関数からはbreakで抜けることは出来ないってだけかと。

Answer 3

jQueryは分かりませんが、eachはforではないのでbreak、continueは無いんじゃないのかな、と想定します。
breakをreturnに置き換えると動きそうですがいかがでしょうか。

for (let i = 0; i < list.length; i++) {
  $target.each((index, elm) => {
    const text = $(elm).text();
    if (text === list[i]) {
      result = index;
      return; // breakをreturnに変更
    }
  });
}