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之验证框validatebox实例详解
Apr 10 jQuery
Jquery获取radio选中的值
May 05 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
jquery实现聊天机器人
Feb 08 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
深入分析jQuery.one() 函数
Jun 03 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中的生成XML文件的4种方法分享
2012/10/06 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
PHP接口类(interface)的定义、特点和应用示例
2020/05/18 PHP
让textarea控件的滚动条怎是位与最下方
2007/04/20 Javascript
基于promise.js实现nodejs的promises库
2014/07/06 NodeJs
JavaScript基础函数整理汇总
2015/01/30 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
微信小程序登录时如何获取input框中的内容
2019/12/04 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
Python中几种操作字符串的方法的介绍
2015/04/09 Python
整理Python最基本的操作字典的方法
2015/04/24 Python
Python2.x版本中基本的中文编码问题解决
2015/10/12 Python
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
Python内置函数OCT详解
2016/11/09 Python
利用Python将时间或时间间隔转为ISO 8601格式方法示例
2017/09/05 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
微信跳一跳python代码实现
2018/01/05 Python
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
Python数据集切分实例
2018/12/08 Python
Django REST framework内置路由用法
2019/07/26 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
python产生模拟数据faker库的使用详解
2020/11/04 Python
基于PyTorch中view的用法说明
2021/03/03 Python
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
学生党支部先进事迹
2014/02/04 职场文书
学雷锋标语
2014/06/25 职场文书
务工证明怎么写
2015/06/18 职场文书