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插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
Jquery获取radio选中的值
May 05 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
使用 jQuery 实现表单验证功能
Jul 05 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
如何在vue 中引入使用jquery
Nov 10 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
学习php设计模式 php实现单例模式(singleton)
2015/12/07 PHP
Windows下php+mysql5.7配置教程
2017/05/16 PHP
js中查找最近的共有祖先元素的实现代码
2010/12/30 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
原生js简单实现放大镜特效
2017/05/16 Javascript
微信小程序页面开发注意事项整理
2017/05/18 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
webpack配置之后端渲染详解
2017/10/26 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
2020/02/06 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
详解Python中的日志模块logging
2015/06/19 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
Python框架Flask的基本数据库操作方法分析
2018/07/13 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
selenium+python实现自动化登录的方法
2018/09/04 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
广告学专业应届生求职信
2013/10/01 职场文书
童装店创业计划书
2014/01/09 职场文书
毕业实习评语
2014/02/10 职场文书
优秀的导游求职信范文
2014/04/06 职场文书
爱护公共设施标语
2014/06/24 职场文书
党的生日演讲稿
2014/09/10 职场文书
《詹天佑》教学反思
2016/02/20 职场文书
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python
golang生成vcf通讯录格式文件详情
2022/03/25 Golang
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers