ユーザ用ツール

サイト用ツール


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

ループ

eachを使ったjQueryでのループ

HTML要素でループ

each でのループ中に continue した場合は return true を、break したい場合は return false をする。

  1. <form action="next.html" method="post" enctype="multipart/form-data">
  2. <input class="test" id="file_1" type="file" name="file_1" data-num="1">
  3. <input class="test" id="file_2" type="file" name="file_2" data-num="2">
  4. <input class="test" id="file_3" type="file" name="file_3" data-num="3">
  5. </form>
  6.  
  7. <script type="text/javascript">
  8. $(function() {
  9. // 要素でループ
  10. $('input[type=file]').each(function(i){
  11. if (条件) {
  12. return true; // continue
  13. }
  14. if (条件) {
  15. return false; // break
  16. }
  17. console.log($(this).val());
  18. });
  19.  
  20. // クラスでループ
  21. $('.test').each(function(i){
  22. console.log($(this).data('num'));
  23. });
  24. });
  25. </script>

オブジェクトでループ

  1. <div>
  2. 学年
  3. <select name="grade">
  4. <option value="1">1
  5. <option value="2">2
  6. <option value="3">3
  7. </select>
  8. </div>
  9. <div>
  10. クラス
  11. <select name="class">
  12. <option value="">学年を選択してください
  13. </select>
  14. </div>
  15. <script>
  16. $(function(){
  17. const class_list = {
  18. 1:['1-A', '1-B', '1-C', '1-D', '1-E'],
  19. 2:['2-A', '2-B', '2-C', '2-D', '2-E'],
  20. 3:['3-A', '3-B', '3-C', '3-D', '3-E'],
  21. };
  22.  
  23. $('select[name="grade"]').on('change', function(){
  24. let grade = $(this).val();
  25. $('select[name="class"] > option').remove();
  26. $.each(class_list[grade], function(key, val){
  27. $('select[name="class"]').append($('<option>').html(val).val(key));
  28. });
  29. });
  30. });
  31. </script>

コメント

コメントを入力. Wiki文法が有効です:
 
プログラム言語/javascript_jquery/ループ.txt · 最終更新: 2024/12/27 05:02 by humolife