详解Jquery 遍历数组之$().each方法与$.each()方法介绍


Posted in Javascript onJanuary 09, 2017

$().each()

对于这个方法,在dom处理上用的比较多,如果一个html页面上面有多个checkbox,这时用$().each来处理checkbox是比较不错的;

$("input[type='checkbox']").each(function(i){
  $(this).attr("checked",true);
});

回调函数里面的i在此处代表input集合传递过去的索引(也就是正在遍历的input元素的索引);

但是这段代码只用到了input集合的索引

<head>
  <title></title>
  <script src="jquery-1.9.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $('input:hidden').each(function (index, obj) {
        alert(obj.name + "..." + obj.value);
      });
    });
  </script>
</head>
<body>
<input type="hidden" value="1" name="a"/>
<input type="hidden" value="2" name="b"/>
<input type="hidden" value="3" name="c"/>
</body>

上面这段代码用到了input集合的索引,有用到了input集合的dom对象,可以通过该对象,拿到其对应的属性如:name,value等;

$.each()方法

1. 该方法处理一维数组,代码如下:

$.each(["aaa","bbb","ccc"],function(index,value){
   alert(i+"..."+value);
});

结果是输出  0...aaa   1...bbb   2...ccc

 2.该方法处理二维数组,代码如下:

$(function () {
      $.each([["aaa", "bbb", "ccc"], ["ddd", "eee", "fff"], ["ggg", "hhh", "iii"]], function (index, item) {
        alert(index + "..." + item);
        //输出0...aaa,bbb,ccc 1...ddd,eee,fff 2...ggg,hhh,iii  这时的index为数组下标,item相当于取这二维数组中的每一个数组
        $.each(item, function (index, itemobj) {
          alert(index + "....." + itemobj);
        });
      });
      //输出0...aaa,bbb,ccc 0...aaa 1...bbb 2...cccc 1...ddd,eee,fff 0...ddd 1...eee 2...fff 2...ggg,hhh,iii 0...ggg 1...hhh 2...iii
    });

3.该方法处理json数组,代码如下:

$(function () {
      var json = [{ name: "张三", sex: "男" }, { name: "李四", sex: "女" }, { name: "王五", sex: "gay"}]; //自定义一个json数组
      $.each(json, function (index, obj) {
        alert(index + "..." + obj.name+"..."+obj.sex);
      });
    });

json为后台传递过来的json数组,each遍历该数组,index通常为数组里面对象的索引,而obj为当前遍历到的对象

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery处理xml格式的返回数据(实例解析)
Nov 28 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
jQuery异步获取json数据方法汇总
Dec 22 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
Feb 08 Javascript
利用forever和pm2部署node.js项目过程
May 10 Javascript
vue解决跨域路由冲突问题思路解析
Nov 03 Javascript
微信小程序模板template简单用法示例
Dec 04 Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 Javascript
VUE实现强制渲染,强制更新
Oct 29 Javascript
vue项目实现图片上传功能
Dec 23 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
Jan 09 #Javascript
基于jQuery实现滚动刷新效果
Jan 09 #Javascript
用jQuery实现优酷首页轮播图
Jan 09 #Javascript
AngularJS实现表单验证功能
Jan 09 #Javascript
AngularJS表单基本操作
Jan 09 #Javascript
AngularJS Controller作用域
Jan 09 #Javascript
详解JavaScript树结构
Jan 09 #Javascript
You might like
PHP 字符串操作入门教程
2006/12/06 PHP
探讨PHP中this,self,parent的区别详解
2013/06/08 PHP
php的ddos攻击解决方法
2015/01/08 PHP
PHP文件缓存类实现代码
2015/10/26 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
javascript document.images实例
2008/05/27 Javascript
Javascript 继承机制实例
2009/08/12 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
IE、FF浏览器下修改标签透明度
2014/01/28 Javascript
json属性名为什么要双引号(个人猜测)
2014/07/31 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
2种简单的js倒计时方式
2017/10/20 Javascript
Angular实现的进度条功能示例
2018/02/18 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
小程序实现tab标签页
2020/11/16 Javascript
python操作gmail实例
2015/01/14 Python
Python使用pymongo模块操作MongoDB的方法示例
2018/07/20 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
数据库什么时候应该被重组
2012/11/02 面试题
入党积极分子思想汇报范文
2014/01/05 职场文书
安全生产投入制度
2014/01/29 职场文书
行政管理毕业生自荐信
2014/02/24 职场文书
cf战队收人口号
2014/06/21 职场文书
2014最新实习证明模板
2014/10/02 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
2015年副班长工作总结
2015/05/15 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python
将图片保存到mysql数据库并展示在前端页面的实现代码
2021/05/02 MySQL
对PyTorch中inplace字段的全面理解
2021/05/22 Python
德生2P3收音机开箱评测
2022/04/30 无线电
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL