上QQ阅读APP看书，第一时间看更新
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错误提示