详解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 相关文章推荐
让getElementsByName适应IE和firefox的方法
Sep 24 Javascript
JS中的substring和substr函数的区别说明
May 07 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
Oct 19 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
Jan 17 Javascript
微信小程序本作用域下调用全局JS详解及实例
Feb 22 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
vue和webpack打包项目相对路径修改的方法
Jun 15 Javascript
axios+Vue实现上传文件显示进度功能
Apr 14 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 Javascript
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
详解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
php5.2时间相差8小时
2007/01/15 PHP
php 接口类与抽象类的实际作用
2009/11/26 PHP
php设计模式 Builder(建造者模式)
2011/06/26 PHP
基于php上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
如何在Ubuntu下启动Apache的Rewrite功能
2013/07/05 PHP
php中过滤非法字符的具体实现
2013/10/29 PHP
jquery 锁定弹出层实现代码
2010/02/23 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
js仿3366小游戏选字游戏
2016/04/14 Javascript
浅析JavaScript中命名空间namespace模式
2016/06/22 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
对python csv模块配置分隔符和引用符详解
2018/12/12 Python
如何实现在jupyter notebook中播放视频(不停地展示图片)
2020/04/23 Python
Python网页解析器使用实例详解
2020/05/30 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
澳大利亚领先的皮肤诊所:Skin Matrix(抗衰老、痤疮专家、药妆护肤)
2018/05/20 全球购物
洗手间标语
2014/06/23 职场文书
股指期货心得体会
2014/09/10 职场文书
自我推荐信格式模板
2015/03/24 职场文书
催款律师函范文
2015/05/27 职场文书
教师考核鉴定意见
2015/06/05 职场文书
休学证明范本
2015/06/19 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
Nginx配置80端口访问8080及项目名地址方法解析
2021/03/31 Servers
python scrapy简单模拟登录的代码分析
2021/07/21 Python
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL