详解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插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
浅析js绑定事件的常用方法
May 15 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
JS实现字符串转驼峰格式的方法
Dec 16 Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 Javascript
微信小程序 聊天室简单实现
Apr 19 Javascript
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
从零开始实现Vue简单的Toast插件
Dec 03 Javascript
Vue中错误图片的处理的实现代码
Nov 07 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 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
Zend公司全球首推PHP认证
2006/10/09 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
PHP中判断文件存在使用is_file还是file_exists?
2015/04/03 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
jQuery动态添加的元素绑定事件处理函数代码
2011/08/02 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
javascript实现按回车键切换焦点
2015/02/09 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
Javascript中window.name属性详解
2020/11/19 Javascript
[59:48]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第一场 1月26日
2021/03/11 DOTA
python实现人脸识别代码
2017/11/08 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
python 字符串只保留汉字的方法
2018/11/16 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
python中的colorlog库使用详解
2019/07/05 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
如何卸载python插件
2020/07/08 Python
留学推荐信怎么写
2014/01/25 职场文书
老师的检讨书
2014/02/23 职场文书
《月球之谜》教学反思
2014/04/10 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
合作协议书
2014/04/23 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL