当前位置:Gxlcms > JavaScript > jQuery中each遍历的三种方法实例分析

jQuery中each遍历的三种方法实例分析

时间:2021-07-01 10:21:17 帮助过:2人阅读

本文实例讲述了jQuery中each遍历的三种方法。分享给大家供大家参考,具体如下:

1、选择器+遍历

  1. $('div').each(function (i){
  2. //i就是索引值
  3. //this 表示获取遍历每一个dom对象
  4. });

2、选择器+遍历

  1. $('div').each(function (index,domEle){
  2. //index就是索引值
  3. //domEle 表示获取遍历每一个dom对象
  4. });

3、更适用的遍历方法

1)先获取某个集合对象

2)遍历集合对象的每一个元素

  1. var d=$("div");
  2. $.each(d,function (index,domEle){
  3. //d是要遍历的集合
  4. //index就是索引值
  5. //domEle 表示获取遍历每一个dom对
  6. });

案例:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>www.gxlcms.com 属性选择器学习</title>
  6. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  7. <script language="javascript" type="text/javascript">
  8. //使用jquery加载事件
  9. $(document).ready(function (){
  10. //<input id="btn0" type="button" value="利用jquery对象实现 修改表单中可见的文本域的值 $('input[type=text]:enabled')" />
  11. $("#btn0").click(function (){
  12. //当点击按钮后,设置id=two的div的背景颜色是绿色
  13. $("input[type=text]:enabled").each(function(index,domEle){
  14. //domEle.value="xxxxx";
  15. $(domEle).val("xxxxxxxx");
  16. });
  17. });
  18. //<input id="btn1" type="button" value="利用jquery对象实现 修改表单中不可修改的文本域的值 $('input[type=text]:disabled')" />
  19. $("#btn1").click(function (){
  20. //当点击按钮后,设置id=two的div的背景颜色是绿色
  21. $("input[type=text]:disabled").each(function(index,domEle){
  22. //domEle.value="xxxxx";
  23. $(domEle).val("xxxxxxxx");
  24. });
  25. });
  26. //<input id="btn2" type="button" value="利用jquery对象实现 获取选中的复选框的个数 $('input[type=checkbox]:checked')" />
  27. $("#btn2").click(function (){
  28. //当点击按钮后,设置id=two的div的背景颜色是绿色
  29. alert($("input[type=checkbox]:checked").length);
  30. /*
  31. $("input[type=checkbox]:checked").each(function(index,domEle){
  32. //alert(domEle.value);
  33. //alert(this.value);
  34. //alert($(this).val());
  35. });
  36. */
  37. });
  38. //<input id="btn3" type="button" value="利用jquery对象实现 获取选中的下拉菜单的内容 $('select option:selected')" />
  39. $("#btn3").click(function (){
  40. //当点击按钮后,设置id=two的div的背景颜色是绿色
  41. $("select option:selected").each(function(index,domEle){
  42. //domEle.value="xxxxx";
  43. alert($(domEle).text());
  44. });
  45. });
  46. });
  47. </script>
  48. </head>
  49. <body>
  50. <form method="post" action="">
  51. <input type="text" value="可见元素1" />
  52. <input type="text" value="不可见元素1" disabled="disabled" />
  53. <input type="text" value="可见元素2" />
  54. <input type="text" value="不可见元素2" disabled="disabled" /><br>
  55. <input type="checkbox" value="美女" />美女
  56. <input type="checkbox" value="美男" />美男
  57. <input type="checkbox" value="大爷" />大爷
  58. <input type="checkbox" value="大妈" />大妈
  59. <br>
  60. <input type="radio" value="男" />男
  61. <input type="radio" value="女" />女
  62. <br>
  63. <select id="zhiwei" size="5" multiple="multiple">
  64. <option>PHP开发工程师</option>
  65. <option>数据库管理员</option>
  66. <option>系统分析师</option>
  67. <option>保安</option>
  68. </select>
  69. <select id="xueli">
  70. <option>大专</option>
  71. <option>中专</option>
  72. <option>小学</option>
  73. </select>
  74. </form>
  75. <div style="clear:both;">
  76. <input id="btn0" type="button" value="利用jquery对象实现 修改表单中可修改的文本域的值 $('input[type=text]:enabled')" /><br>
  77. <input id="btn1" type="button" value="利用jquery对象实现 修改表单中不可修改的文本域的值 $('input[type=text]:disabled')" /><br>
  78. <input id="btn2" type="button" value="利用jquery对象实现 获取选中的复选框的个数 $('input[type=checkbox]:checked')" /><br>
  79. <input id="btn3" type="button" value="利用jquery对象实现 获取选中的下拉菜单的内容 $('select option:selected')" /><br>
  80. </div>
  81. </body>
  82. </html>

运行结果:

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容还可查看本站专题:《jQuery操作DOM节点方法总结》、《jQuery遍历算法与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

人气教程排行