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实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 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 curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
PHP大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
php二维数组转成字符串示例
2014/02/17 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
PHP list() 将数组中的值赋给变量的简单实例
2016/06/13 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
javascript常用的正则表达式实例
2014/05/15 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
nodejs简单实现中英文翻译
2015/05/04 NodeJs
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
[41:08]TNC vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python学习之用pygal画世界地图实例
2017/12/07 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
Python数据集切分实例
2018/12/08 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
python怎么判断素数
2020/07/01 Python
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
科颜氏香港官方网店:Kiehl’s香港
2021/03/07 全球购物
关于读书的演讲稿400字
2014/08/27 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
会议邀请函
2015/01/30 职场文书
劳动者解除劳动合同通知书
2015/04/16 职场文书
确保工程质量承诺书
2015/04/29 职场文书