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库冲突的完美解决办法
May 20 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
使用jQuery实现购物车
Oct 29 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 FLEA中二叉树数组的遍历输出
2012/09/26 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
利用PHPExcel读取Excel的数据和导出数据到Excel
2017/05/12 PHP
详解PHP 二维数组排序保持键名不变
2019/03/06 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
javascript中Date()函数在各浏览器中的显示效果
2015/06/18 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
2017/01/13 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
如何在Vue中抽离接口配置文件
2019/10/31 Javascript
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
python:socket传输大文件示例
2017/01/18 Python
利用Python循环(包括while&amp;for)各种打印九九乘法表的实例
2017/11/06 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
对python 调用类属性的方法详解
2019/07/02 Python
python 模拟贷款卡号生成规则过程解析
2019/08/30 Python
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
2014小学年度工作总结
2014/12/20 职场文书
2015年采购员工作总结
2015/04/27 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
大学升旗仪式主持词
2015/07/04 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS