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 相关文章推荐
Angular2使用jQuery的方法教程
May 28 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
jquery图片放大镜效果
Jun 23 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 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快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
解析php常用image图像函数集
2013/06/24 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
json+jQuery实现的无限级树形菜单效果代码
2015/08/27 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
2019/04/12 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
python机器学习之神经网络(三)
2017/12/20 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
Python音频操作工具PyAudio上手教程详解
2019/06/26 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
python urllib和urllib3知识点总结
2021/02/08 Python
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
Free People中国官网:波西米亚风格女装服饰
2016/08/30 全球购物
Java的五个基础面试题
2016/02/26 面试题
送货司机岗位职责
2013/12/11 职场文书
毕业生自荐书
2013/12/18 职场文书
《两只鸟蛋》教学反思
2014/02/10 职场文书
母亲节感恩寄语
2014/02/21 职场文书
年度考核自我鉴定
2014/03/19 职场文书
一份文言文检讨书
2014/09/13 职场文书
团干部培训班心得体会
2016/01/06 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书
React forwardRef的使用方法及注意点
2021/06/13 Javascript
MySQL池化框架学习接池自定义
2022/07/23 MySQL