详解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 相关文章推荐
js停止输出代码
Jul 20 Javascript
div+css布局的图片连续滚动js实现代码
May 04 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 Javascript
JS获取当前页面名称的简单实例
Aug 19 Javascript
AngularJS入门教程之REST和定制服务详解
Aug 19 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
Mar 21 Javascript
vue-cli3 配置开发与测试环境详解
May 17 Javascript
vue-cli webpack配置文件分析
May 20 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 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 ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
JavaScript防止全局变量污染的方法总结
2018/08/02 Javascript
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
简单理解Python中的装饰器
2015/07/31 Python
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
python文本数据相似度的度量
2018/03/12 Python
Python实现从log日志中提取ip的方法【正则提取】
2018/03/31 Python
pandas对指定列进行填充的方法
2018/04/11 Python
Python操作Sql Server 2008数据库的方法详解
2018/05/17 Python
Python subprocess库的使用详解
2018/10/26 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
Tensorflow 多线程设置方式
2020/02/06 Python
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
一些Solaris面试题
2013/03/22 面试题
几个Linux面试题笔试题
2016/08/01 面试题
人力资源专员自我评价怎么写
2013/09/19 职场文书
洗煤厂厂长岗位职责
2014/01/03 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
评职称个人总结
2015/03/05 职场文书
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js