详解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 相关文章推荐
学习ExtJS Window常用方法
Oct 07 Javascript
jquery 弹出登录窗口实现代码
Dec 24 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
Feb 22 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
Jun 09 Javascript
javascript判断复选框是否选中的方法
Oct 16 Javascript
JavaScript事件类型中UI事件详解
Jan 14 Javascript
详细总结Javascript中的焦点管理
Sep 17 Javascript
微信小程序 本地数据读取实例
Apr 27 Javascript
通过button将form表单的数据提交到action层的实例
Sep 08 Javascript
vue-cli3中vue.config.js配置教程详解
May 29 Javascript
Vue实现拖放排序功能的实例代码
Jul 08 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
Jul 17 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
B2K与车机的中波PK
2021/03/02 无线电
php mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
php压缩文件夹最新版
2018/07/18 PHP
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015/03/12 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
字符串反转_JavaScript
2016/04/28 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
webpack配置的最佳实践分享
2017/04/21 Javascript
解决vue2中使用axios http请求出现的问题
2018/03/05 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
js如何验证密码强度
2020/03/18 Javascript
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
Python Socket使用实例
2017/12/18 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
python 中pyqt5 树节点点击实现多窗口切换问题
2019/07/04 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
使用django自带的user做外键的方法
2020/11/30 Python
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
自动化职业生涯规划书范文
2014/01/03 职场文书
2014年党员整改措施范文
2014/09/21 职场文书
学校查摆问题整改措施
2014/09/28 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
2016年春季运动会通讯稿
2015/11/25 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏