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插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jQuery中的deferred对象和extend方法详解
May 08 jQuery
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
jQuery实现简单QQ聊天框
Aug 27 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 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
打造计数器DIY三步曲(下)
2006/10/09 PHP
php无序树实现方法
2015/07/28 PHP
PHP 传输会话curl函数的实例详解
2017/09/12 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
javascript事件委托的方式绑定详解
2015/06/10 Javascript
javascript中数组方法汇总
2015/07/07 Javascript
XML、HTML、CSS与JS的区别整理
2016/02/18 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
2016/10/08 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
微信小程序实现图片放大预览功能
2020/10/22 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
python中的实例方法、静态方法、类方法、类变量和实例变量浅析
2014/04/26 Python
python制作花瓣网美女图片爬虫
2015/10/28 Python
Python字符串拼接的几种方法整理
2017/08/02 Python
Python实现PS滤镜特效之扇形变换效果示例
2018/01/26 Python
Django Web开发中django-debug-toolbar的配置以及使用
2018/05/06 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
windows支持哪个版本的python
2020/07/03 Python
会计学应届毕业生推荐信
2013/11/04 职场文书
人力资源管理毕业生自荐信
2013/11/21 职场文书
机电一体化专业应届生求职信
2013/11/27 职场文书
财经学院自荐信范文
2014/02/02 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
残联2016年全国助残日活动总结
2016/04/01 职场文书
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL
图文详解matlab原始处理图像几何变换
2021/07/09 Python