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加密密码到cookie的实现代码
Apr 18 jQuery
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
jQuery弹框插件使用方法详解
May 26 jQuery
jQuery实现动态向上滚动
Dec 21 jQuery
jQuery实现购物车全功能
Jan 11 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下通过file_get_contents的代理使用方法
2011/02/16 PHP
让PHP显示Facebook的粉丝数量方法
2014/01/08 PHP
php绘图之加载外部图片的方法
2015/01/24 PHP
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
PHP+Apache环境中如何隐藏Apache版本
2017/11/24 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
extjs form textfield的隐藏方法
2008/12/29 Javascript
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
JS链式调用的实现方法
2013/03/07 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
jQuery CSS()方法改变现有的CSS样式
2014/08/20 Javascript
JS获取时间的方法
2015/01/21 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
laydate.js日期时间选择插件
2017/01/04 Javascript
Angularjs的启动过程分析
2017/07/18 Javascript
vue-resource拦截器设置头信息的实例
2017/10/27 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
Python字符和字符值(ASCII或Unicode码值)转换方法
2015/05/21 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
python报错: 'list' object has no attribute 'shape'的解决
2020/07/15 Python
英国网上购买门:Direct Doors
2018/06/07 全球购物
3分钟演讲稿
2014/04/30 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
大学生助学金感谢信
2015/01/21 职场文书
画展邀请函
2015/01/31 职场文书
计划生育个人总结
2015/03/02 职场文书
同事打架检讨书
2015/05/06 职场文书
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs