ユーザ用ツール

サイト用ツール


プログラム言語:javascript_jquery:ループ

差分

このページの2つのバージョン間の差分を表示します。

この比較画面にリンクする

次のリビジョン
前のリビジョン
プログラム言語:javascript_jquery:ループ [2018/10/11 11:01]
yusuke_komori 作成
プログラム言語:javascript_jquery:ループ [2024/12/27 05:02] (現在)
humolife [HTML要素でループ]
行 1: 行 1:
 ====== ループ ====== ====== ループ ======
-===== jQueryでのループ =====+===== eachを使ったjQueryでのループ ===== 
 +==== HTML要素でループ ==== 
 +each でのループ中に continue した場合は return true を、break したい場合は return false をする。
 <code> <code>
 <form action="next.html" method="post" enctype="multipart/form-data"> <form action="next.html" method="post" enctype="multipart/form-data">
行 12: 行 14:
   // 要素でループ   // 要素でループ
   $('input[type=file]').each(function(i){   $('input[type=file]').each(function(i){
 +    if (条件) {
 +      return true;  // continue
 +    }
 +    if (条件) {
 +      return false;  // break
 +    }
     console.log($(this).val());     console.log($(this).val());
   });   });
行 18: 行 26:
   $('.test').each(function(i){   $('.test').each(function(i){
     console.log($(this).data('num'));     console.log($(this).data('num'));
 +  });
 +});
 +</script>
 +</code>
 +==== オブジェクトでループ ====
 +<code>
 +<div>
 +    学年
 +    <select name="grade">
 +        <option value="1">1
 +        <option value="2">2
 +        <option value="3">3
 +    </select>
 +</div>
 +<div>
 +    クラス
 +    <select name="class">
 +        <option value="">学年を選択してください
 +    </select>
 +</div>
 +<script>
 +$(function(){
 +  const class_list = {
 +    1:['1-A', '1-B', '1-C', '1-D', '1-E'],
 +    2:['2-A', '2-B', '2-C', '2-D', '2-E'],
 +    3:['3-A', '3-B', '3-C', '3-D', '3-E'],
 +  };
 +
 +  $('select[name="grade"]').on('change', function(){
 +    let grade = $(this).val();
 +    $('select[name="class"] > option').remove();
 +    $.each(class_list[grade], function(key, val){
 +      $('select[name="class"]').append($('<option>').html(val).val(key));
 +    });
   });   });
 }); });
プログラム言語/javascript_jquery/ループ.1539223299.txt.gz · 最終更新: 2018/10/11 11:01 by yusuke_komori