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.form.js异步提交表单详解
Apr 25 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
基于jquery实现五星好评
Nov 18 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 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
jquery 指南/入门基础
2007/11/30 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
微信web端后退强制刷新功能的实现代码
2018/03/04 Javascript
js中时间格式化的几种方法
2018/07/22 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
用Python生成器实现微线程编程的教程
2015/04/13 Python
Python单链表简单实现代码
2016/04/27 Python
python实现批量修改文件名代码
2017/09/10 Python
python简易远程控制单线程版
2018/06/20 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
浅析python 中大括号中括号小括号的区分
2019/07/29 Python
python内置模块collections知识点总结
2019/12/19 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
Python日志器使用方法及原理解析
2020/09/27 Python
Python ConfigParser模块的使用示例
2020/10/12 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
怎么样写好简历中的自我评价
2013/10/25 职场文书
学习普通话的体会
2014/11/07 职场文书
2014年服务行业工作总结
2014/11/18 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
立春观后感
2015/06/18 职场文书
债务追讨律师函
2015/06/24 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
预备党员的思想汇报,你真的会写吗?
2019/06/28 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js