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 EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
Jquery获取radio选中的值
May 05 jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
jQuery实现本地存储
Dec 22 jQuery
jQuery实现简单轮播图效果
Dec 27 jQuery
html中两种获取标签内的值的方法
Jun 16 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创建div 实现代码
2009/04/27 Javascript
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
js防止表单重复提交实现代码
2012/09/05 Javascript
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
2016/05/31 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
详解小程序退出页面时清除定时器
2019/04/28 Javascript
Vue-cli3项目引入Typescript的实现方法
2019/10/18 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
Python CSV模块使用实例
2015/04/09 Python
python实现telnet客户端的方法
2015/04/15 Python
python中map、any、all函数用法分析
2015/04/21 Python
详解Python中dict与set的使用
2015/08/10 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
python利用正则表达式搜索单词示例代码
2017/09/24 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
如何用python处理excel表格
2020/06/09 Python
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
阿玛尼意大利官网:Armani意大利
2018/10/30 全球购物
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
DELPHI中如何调用API,可举例说明
2014/01/16 面试题
大学生求职推荐信
2013/11/27 职场文书
小学国庆节活动方案
2014/02/11 职场文书
医学生求职自荐书
2014/06/12 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
仙境之桥观后感
2015/06/16 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书