详解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 相关文章推荐
CSS+JS构建的图片查看器
Jul 22 Javascript
JavaScript中的一些定位属性[图解]
Jul 14 Javascript
浅谈JavaScript函数参数的可修改性问题
Dec 05 Javascript
JS中数组Array的用法示例介绍
Feb 20 Javascript
Javascript基础教程之if条件语句
Jan 18 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
javascript框架设计之类工厂
Jun 23 Javascript
JS使用正则表达式验证身份证号码
Jun 23 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
详解Vue源码中一些util函数
Apr 24 Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 Javascript
微信小程序抽奖组件的使用步骤
Jan 11 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获取客户端电脑屏幕参数的方法
2015/01/09 PHP
php基础教程
2015/08/26 PHP
CodeIgniter自定义控制器MY_Controller用法分析
2016/01/20 PHP
详解PHP归并排序的实现
2016/10/18 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
密码框显示提示文字jquery示例
2013/08/29 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
Vue.js bootstrap前端实现分页和排序
2017/03/10 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
2017/12/20 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
2018/10/26 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
python简单实例训练(21~30)
2017/11/15 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
python 实现selenium断言和验证的方法
2019/02/13 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
pyinstaller打包opencv和numpy程序运行错误解决
2019/08/16 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
Python3批量创建Crowd用户并分配组
2020/05/20 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
俄罗斯马克西多姆家居用品网上商店:Максидом
2020/02/06 全球购物
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技