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插件
Mar 29 jQuery
jQuery Validate 校验多个相同name的方法
May 18 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 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安装全攻略:APACHE
2006/10/09 PHP
PHP 地址栏信息的获取代码
2009/01/07 PHP
基于php验证码函数的使用示例
2013/05/03 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
php检测url是否存在的方法
2015/04/14 PHP
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
2017/09/15 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
Jquery公告滚动+AJAX后台得到数据
2011/04/14 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
javascript读取xml实现javascript分页
2013/12/13 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
python如何实现图片压缩
2020/09/11 Python
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
高一政治教学反思
2014/01/28 职场文书
护理专业自我鉴定
2014/01/30 职场文书
校园安全检查制度
2014/02/03 职场文书
孝老爱亲模范事迹材料
2014/05/25 职场文书
工厂门卫的岗位职责
2014/07/27 职场文书