Symfoware

Symfowareについての考察blog

jQuery 要素をeachしている中で、continue、breakする方法(Illegal continue statement )

jQueryで要素をeachループしているとき、continueやbreakしたい時があります。
うまい例が浮かばなかったのですが、例えばdiv要素の中を見て、
3だったら内容を変更してループ継続。
5だったら、内容変更してループを脱出します。


※このプログラムはエラーになります。


  1. <!DOCTYPE html> <html lang="ja">
  2. <head>
  3.     <meta charset="utf-8">
  4.     <title>jQuery</title>
  5.     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  6.     <script type="text/javascript">
  7. $(function() {
  8.     
  9.     $('.test').each(
  10.         function() {
  11.             if ($(this).html() == '3') {
  12.                 $(this).html('3だよ');
  13.                 continue;
  14.             }
  15.             
  16.             if ($(this).html() == '5') {
  17.                 $(this).html('5が見つかったので終了');
  18.                 break;
  19.             }
  20.             
  21.         }
  22.     );
  23.     
  24.     
  25. });
  26.     </script>
  27. </head>
  28. <div class="test">1</div>
  29. <div class="test">2</div>
  30. <div class="test">3</div>
  31. <div class="test">4</div>
  32. <div class="test">5</div>
  33. <div class="test">6</div>
  34. <div class="test">7</div>
  35. <div class="test">8</div>
  36. <div class="test">9</div>
  37. <div class="test">10</div>
  38. <body>
  39. </body>
  40. </html>




実行すると、こんなエラーが発生して狙った動作になりません。


Uncaught SyntaxError: Illegal continue statement




内容が変更されていない。

459_01.png


each中にcontinueしたいときは
「return true」

each中にbreakしたいときは
「return false」

とすれば良いそうで。

jQuery の each() の continue / break は・・・


こんな感じに変更してリトライ。


  1. <!DOCTYPE html> <html lang="ja">
  2. <head>
  3.     <meta charset="utf-8">
  4.     <title>jQuery</title>
  5.     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  6.     <script type="text/javascript">
  7. $(function() {
  8.     
  9.     $('.test').each(
  10.         function() {
  11.             if ($(this).html() == '3') {
  12.                 $(this).html('3だよ');
  13.                 // continueじゃなくてreturn true
  14.                 return true;
  15.             }
  16.             
  17.             if ($(this).html() == '5') {
  18.                 $(this).html('5が見つかったので終了');
  19.                 // breakじゃなくてreturn false
  20.                 return false;
  21.             }
  22.             
  23.         }
  24.     );
  25.     
  26.     
  27. });
  28.     </script>
  29. </head>
  30. <div class="test">1</div>
  31. <div class="test">2</div>
  32. <div class="test">3</div>
  33. <div class="test">4</div>
  34. <div class="test">5</div>
  35. <div class="test">6</div>
  36. <div class="test">7</div>
  37. <div class="test">8</div>
  38. <div class="test">9</div>
  39. <div class="test">10</div>
  40. <body>
  41. </body>
  42. </html>




狙い通りの動作になりました。

459_02.png
関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2014/08/30(土) 18:54:47|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<Python 翌日、翌月を取得する(datetime.timedelta,dateutil.relativedelta) | ホーム | PHPで関数の呼び出し元を調べ、ログファイルに出力する>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://symfoware.blog68.fc2.com/tb.php/1475-5e26e0d0
この記事にトラックバックする(FC2ブログユーザー)