zoukankan      html  css  js  c++  java
  • js脚本中 forEach()循环. each()循环及普通for循环

    1. js中普通for循环
     1  var array = [5, 4, 3, 2, 1];
     2         var $array = $(array);
     3         $("body>ul").append("js中的普通for循环");
     4         for (var i = 0; i < array.length; i++) {
     5             $("body>ul").append("<p>" + array[i] + "&nbsp;&nbsp;&nbsp;&nbsp;" + i + "</p>") ;
     6         }
     7 js中的普通for循环
     8 5    0
     9 
    10 4    1
    11 
    12 3    2
    13 
    14 2    3
    15 
    16 1    4

      2.js的forEach()循环

     1 $("body>ul").append("js中的forEach()循环");
     2         array.forEach(function (element, index) {
     3             $("body>ul").append("<p>" + element + "&nbsp;&nbsp;&nbsp;&nbsp;" + index + "</p>")  ;
     4         });
     5 ----------------------------------------
     6 js中的forEach()循环
     7 5    0
     8 
     9 4    1
    10 
    11 3    2
    12 
    13 2    3
    14 
    15 1    4

      3.jQuery中的each()循环

    • //这是转换成jQuery对象的方法
     $array.each(function (i) {
                $("body>ul").append("<p>" + this + "&nbsp;&nbsp;&nbsp;&nbsp;" + (i++) + "</p>");
            }) ;
    ----------------------------------
    jQuery中的forEach()循环
    5    0
    
    4    1
    
    3    2
    
    2    3
    
    1    4
    • 没有转换成jQuery对象的使用方法
      $.each(array,function (index,element) {
                $("body>ul").append("<p>" + element + "&nbsp;&nbsp;&nbsp;&nbsp;" + index + "</p>");
            })
    --------------------------------------------------
    5    0
    
    4    1
    
    3    2
    
    2    3
    
    1    4
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <script src="js/jquery-1.12.4.min.js"></script>
     8 <script>
     9     $(document).ready(function () {
    10         var array = [5, 4, 3, 2, 1];
    11         var $array = $(array);
    12         $("body>ul").append("js中的普通for循环");
    13         for (var i = 0; i < array.length; i++) {
    14             $("body>ul").append("<p>" + array[i] + "&nbsp;&nbsp;&nbsp;&nbsp;" + i + "</p>") ;
    15         }
    16         $("body>ul").append("js中的forEach()循环");
    17         array.forEach(function (element, index) {
    18             $("body>ul").append("<p>" + element + "&nbsp;&nbsp;&nbsp;&nbsp;" + index + "</p>")  ;
    19         });
    20 
    21         $("body>ul").append("jQuery中的forEach()循环");
    22             //这是转换成jQuery对象的方法
    23         $array.each(function (i) {
    24             $("body>ul").append("<p>" + this + "&nbsp;&nbsp;&nbsp;&nbsp;" + (i++) + "</p>");
    25         }) ;
    26         $("body>ul").append("-----------------");
    27             //不转换成jQuery对象的方法
    28         $.each(array,function (index,element) {
    29             $("body>ul").append("<p>" + element + "&nbsp;&nbsp;&nbsp;&nbsp;" + index + "</p>");
    30         })
    31     })  ;
    32 </script>
    33 <body>
    34 <ul></ul>
    35 </body>
    36 </html>
    View Code

  • 相关阅读:
    Django框架(二)
    USACO 2019 December Contest 随记
    Codeforces 1249E By Elevator or Stairs? 题解
    NIKKEI Programming Contest 2019-2 D 部分分题解
    Codeforces 1196D2 RGB Substring (Hard version) 题解
    HDU5943 Kingdom of Obsession 题解
    智能账单统计软件开发日志3 图像比对算法
    Codeforces #536 A..D 题解
    智能账单统计软件开发日志2 图像形态优化
    智能账单统计软件开发日志1 立项与环境配置
  • 原文地址:https://www.cnblogs.com/MrliBlog/p/11018232.html
Copyright © 2011-2022 走看看