详解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 相关文章推荐
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
给Javascript数组插入一条记录的代码
Aug 30 Javascript
javascript 页面只自动刷新一次
Jul 10 Javascript
使用非html5实现js板连连看游戏示例代码
Sep 22 Javascript
jQuery的end()方法使用详解
Jul 15 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
学习JavaScript图片预加载模块
Nov 07 Javascript
javascript中闭包概念与用法深入理解
Dec 15 Javascript
vue.js 中使用(...)运算符报错的解决方法
Aug 09 Javascript
150行Node.js实现的dns代理工具
Aug 02 Javascript
js实现拖拽元素选择和删除
Aug 25 Javascript
vue递归实现树形组件
Jul 15 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
十天学会php之第十天
2006/10/09 PHP
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
Laravel框架使用Redis的方法详解
2018/05/30 PHP
Javascript insertAfter() 实现函数代码
2011/10/12 Javascript
javascript setinterval 的正确语法如何书写
2014/06/17 Javascript
JavaScript开发人员的10个关键习惯小结
2014/12/05 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
简介AngularJS的视图功能应用
2015/06/17 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
bootstrap confirmation按钮提示组件使用详解
2017/08/22 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
React中的refs的使用教程
2018/02/13 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
2018/11/08 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
python如何发布自已pip项目的方法步骤
2018/10/09 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
Django文件存储 默认存储系统解析
2019/08/02 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
Python2与Python3的区别点整理
2019/12/12 Python
快速解决jupyter启动卡死的问题
2020/04/10 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
上班离岗检讨书
2014/01/27 职场文书
经典洗发水广告词
2014/03/13 职场文书
初中班主任评语大全
2014/04/24 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android
MySQL GTID复制的具体使用
2022/05/20 MySQL