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.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jQuery each和js forEach用法比较
Feb 27 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
jQuery 移除事件的方法
Jun 20 jQuery
jQuery实现增删改查
Dec 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
基于thinkPHP3.2实现微信接入及查询token值的方法
2017/04/18 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
探讨JavaScript中声明全局变量三种方式的异同
2013/12/03 Javascript
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
koa上传excel文件并解析的实现方法
2018/08/09 Javascript
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
python连接oracle数据库实例
2014/10/17 Python
Python中序列的修改、散列与切片详解
2017/08/27 Python
使用python实现语音文件的特征提取方法
2019/01/09 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
Python中logging日志库实例详解
2020/02/19 Python
appium+python adb常用命令分享
2020/03/06 Python
基于python连接oracle导并出数据文件
2020/04/28 Python
Django url 路由匹配过程详解
2021/01/22 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
Hibernate持久层技术
2013/12/16 面试题
高中三年学习生活的自我评价
2013/10/10 职场文书
班组长工作职责
2013/12/25 职场文书
财会自我鉴定范文
2013/12/27 职场文书
麦当劳辞职信范文
2014/01/18 职场文书
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
施工安全协议书范本
2014/09/26 职场文书
法定代表人身份证明书
2015/06/18 职场文书
python基础详解之if循环语句
2021/04/24 Python
手把手教你使用TensorFlow2实现RNN
2021/07/15 Python