====== ループ ======
===== eachを使ったjQueryでのループ =====
==== HTML要素でループ ====
<code>
<form action="next.html" method="post" enctype="multipart/form-data">
    <input class="test" id="file_1" type="file" name="file_1" data-num="1">
    <input class="test" id="file_2" type="file" name="file_2" data-num="2">
    <input class="test" id="file_3" type="file" name="file_3" data-num="3">
</form>

<script type="text/javascript">
$(function() {
  // 要素でループ
  $('input[type=file]').each(function(i){
    console.log($(this).val());
  });

  // クラスでループ
  $('.test').each(function(i){
    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));
    });
  });
});
</script>
</code>