详解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获取html元素的绝对位置和相对位置的方法
Jun 20 Javascript
JavaScript中的编码和解码函数
Feb 15 Javascript
JavaScript数据结构之二叉树的查找算法示例
Apr 13 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
VUE + UEditor 单图片跨域上传功能的实现方法
Feb 08 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
Feb 23 Javascript
Angular HMR(热模块替换)功能实现方法
Apr 04 Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 Javascript
基于Vue实现电商SKU组合算法问题
May 29 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 Javascript
原生js canvas实现鼠标跟随效果
Aug 02 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 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
十大“创意”战术!
2020/03/04 星际争霸
PHP连接SQLServer2005 的问题解决方法
2010/07/19 PHP
php 生成文字png图片的代码
2011/04/17 PHP
深入分析php之面向对象
2013/05/15 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
php获取图片信息的方法详解
2015/12/10 PHP
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
微信小程序定位当前城市的方法
2018/07/19 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
jsonp实现百度下拉框功能的方法分析
2019/05/10 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
python三元运算符实现方法
2013/12/17 Python
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
python创造虚拟环境方法总结
2019/03/04 Python
python函数定义和调用过程详解
2020/02/09 Python
python+opencv实现车道线检测
2021/02/19 Python
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
重阳节登山活动方案
2014/02/03 职场文书
商场总经理岗位职责
2014/02/03 职场文书
知识竞赛主持词
2014/03/26 职场文书
老公给老婆的检讨书(精华篇)
2014/10/18 职场文书
校本培训个人总结
2015/02/28 职场文书
python3美化表格数据输出结果的实现代码
2021/04/14 Python