jQuery中each方法的使用详解


Posted in jQuery onMarch 18, 2018

概述:

each() 方法规定为每个匹配元素规定运行的函数。

返回 false 可用于及早停止循环,相当于break。

返回 true 可以结束本次循环,相当于continue。

语法:

$(selector).each(function(index,element){ })

index - 选择器的 index 位置


element - 当前的元素(也可使用 "this" 选择器)

$(selector).each(function(){ })

$.each(array,function(Key,Value){ })

1.遍历js数组

$(function(){
 var array=["aaa","bbb","ccc"];
 $.each(array,function(i,j){
  alert(i+":"+j);//i表示索引,j代表值
 });
})

2.遍历Object对象

var obj = new Object();
obj.name="zs";
$.each(obj, function(name, value) {
alert(this);  //this指向当前属性的值,等价于value

alert(name);  //name表示Object当前属性的名称

alert(value);  //value表示Object当前属性的值
});

3.遍历JSON对象

var json ={"name":"zhangSan","role":"student"};
$.each(json,function(key,value){
 alert(key+":"+value);
});

4.遍历由多个JSON对象组成的数组

var json =[{"name":"Amy","role":"student"},{"name":"Tom","role":"student"}];
$.each(json, function(index, value) {
  alert("index="+index+"\n" +"name:"+value.name+"\n"+"role:"+value.role+"\n");
});

 5.遍历jQuery对象 

<head>
  <meta charset="utf-8" />
  <title>遍历jQuery对象</title>
  <script src="js/jquery-1.12.4.js"></script>
  <script type="text/javascript">
   $(function(){
    $("input[type='button']").bind("click",function(){
     $("li").each(function(){
      alert($(this).text())
      });
    });
   });
  </script>
 </head>
 <body>
  <input type="button" value="触发事件"/>
  <ul>
   <li>first</li>
   <li>second</li>
  </ul>
 </body>

总结

以上所述是小编给大家介绍的jQuery中each方法的使用详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

jQuery 相关文章推荐
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 #jQuery
JQuery选中select组件被选中的值方法
Mar 08 #jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 #jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 #jQuery
jQuery实现左右滑动的toggle方法
Mar 03 #jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 #jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 #jQuery
You might like
自制汽车收音机天线:收听广播的技巧和方法
2021/03/02 无线电
php实现微信发红包功能
2018/07/13 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
Python获取linux主机ip的简单实现方法
2016/04/18 Python
Python操作SQLite数据库的方法详解【导入,创建,游标,增删改查等】
2017/07/11 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
redis数据库及与python交互用法简单示例
2019/11/01 Python
python sorted方法和列表使用解析
2019/11/18 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
tensorflow 分类损失函数使用小记
2020/02/18 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
Python如何使用input函数获取输入
2020/08/06 Python
先进事迹报告会感言
2014/01/24 职场文书
施工质量承诺书范文
2014/05/30 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
2014年合同管理工作总结
2014/12/02 职场文书
村党组织公开承诺书
2015/04/30 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
如何用Navicat操作MySQL
2021/05/12 MySQL
sql注入教程之类型以及提交注入
2021/08/02 MySQL
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python