蚂蟥机和蚯蚓机和捕鱼机一样么

書名： 15天學會jQuery編程與實戰（視頻教學版）（Web前端技術叢書）
作者名：劉鑫
本章字數： 513字
更新時間： 2020-11-28 16:21:46

3.5 通過for…of為頁面中的元素循環指定ID

當我們為頁面中添加多個同類元素時，可以通過循環的方式為元素指定ID或value，以方便后面的操作。

目前，jQuery 3支持兩種循環：for和for…of。其中，for…of是新增的循環方式。當增加按鈕時，需要為按鈕指定value值，讓其顯示按鈕的名字，這里通過兩個例子演示。

【示例3-5】for.html

        01    <! DOCTYPE HTML>
        02    <html>
        03    <head>
        04    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        05   <title>for循環</title>
        06    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
        07    <script type="text/javascript">
        08      $(document).ready(function(e) {
        09        $("#btn1").click(function(e) {
        10           $("#test2").after("<input type='button' /><br/>");  //添加按鈕
        11           $("#test2").after("<input type='button' /><br/>");  //添加按鈕
        12             $("#test2").after("<input type='button' /><br/>"); //添加按鈕
        13               var $inputs = $('input');
        14             for(var i = 0; i < $inputs.length; i++) {       //循環為按鈕添加值
        15                 $inputs[i].value = ’按鈕’ + i;
        16               }
        17        });
        18    });
        19    </script>
        20    </head>
        21
        22    <body>
        23    <p id="test">
        24   給所有input指定值
        25    </p>
        26    <div>
        27   <button id="btn1">添加3個按鈕</button>
        28    </div>
        29    <div id="test2"></div>
        30    </body>
        31    </html>

在HTML頁面設計一個div，用來放置新添加的3個按鈕。按鈕通過第10～12行的after()方法添加。第14～16行使用for循環逐個為新添加的按鈕添加value值。因為使用了從0開始的循環，所以按鈕的值依次是按鈕0、按鈕1和按鈕2。本示例效果如圖3.6所示。

圖3.6 添加按鈕并賦值

上面的功能同樣可以使用jQuery 3.X支持的for..of實現。

【示例3-6】for-of.html

        01    <script type="text/javascript">
        02      $(document).ready(function(e) {
        03        $("#btn1").click(function(e) {
        04           $("#test2").after("<input type='button' /><br/>");  //添加按鈕
        05           $("#test2").after("<input type='button' /><br/>");  //添加按鈕
        06             $("#test2").after("<input type='button' /><br/>"); //添加按鈕
        07               var $inputs = $('input');
        08               var i = 0;
        09             for(var input of $inputs) {                             //循環
        10                 input.value = ’按鈕’ + i++;
        11               }
        12         });
        13    });
        14    </script>

本示例的代碼在一些有代碼檢查的編輯器中可能會提示第9行錯誤，如Dreamweaver的錯誤提示，如圖3.7所示。因為舊的代碼沒有這種for的寫作方式。但這不影響程序在瀏覽器中正常輸出，輸出效果與圖3.6相同。

圖3.7 Dreamweaver錯誤提示

官术网_书友最值得收藏!

15天學會jQuery編程與實戰（視頻教學版） （Web前端技術叢書）

3.5 通過for…of為頁面中的元素循環指定ID

15天學會jQuery編程與實戰（視頻教學版）（Web前端技術叢書）