详解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 相关文章推荐
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
javascript中encodeURI和decodeURI方法使用介绍
May 06 Javascript
图片Slider 带左右按钮的js示例
Aug 30 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
javascript每日必学之运算符
Feb 16 Javascript
jQuery获取同级元素的简单代码
Jul 09 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
Aug 25 Javascript
用js制作淘宝放大镜效果
Oct 28 Javascript
使用ionic播放轮询广告的实现方法(必看)
Apr 24 Javascript
详解Webpack实战之构建 Electron 应用
Dec 25 Javascript
uniapp引入支付宝原生扫码插件步骤详解
Jul 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
YB217、YB235、YB400浅听
2021/03/02 无线电
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
javascript的函数劫持浅析
2016/09/26 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
微信小程序实现选项卡功能
2020/06/19 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
Python列表推导式的使用方法
2013/11/21 Python
浅谈python对象数据的读写权限
2016/09/12 Python
Python实现根据日期获取当天凌晨时间戳的方法示例
2019/04/09 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
Wilson体育用品官网:美国著名运动器材品牌
2019/05/12 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
思想汇报范文
2013/11/04 职场文书
教育课题研究自我鉴定范文
2013/12/28 职场文书
中国文明网签名寄语
2014/01/18 职场文书
银行见习期自我鉴定
2014/01/29 职场文书
作文评语集锦大全
2014/04/23 职场文书
十周年庆典策划方案
2014/06/03 职场文书
三八红旗手事迹材料
2014/12/26 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
golang 实用库gotable的具体使用
2021/07/01 Golang
SQL实现LeetCode(197.上升温度)
2021/08/07 MySQL
英镑符号 £
2022/02/17 杂记