ゆーものメモ帳

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。

====== ループ ======
===== eachを使ったjQueryでのループ =====
==== HTML要素でループ ====
each でのループ中に continue した場合は return true を、break したい場合は return false をする。
<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){
    if (条件) {
      return true;  // continue
    }
    if (条件) {
      return false;  // break
    }
    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>

ゆーものメモ帳

ユーザ用ツール

サイト用ツール

ページ用ツール