详解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的blockui插件显示弹出层
Apr 14 Javascript
JS 退出系统并跳转到登录界面的实现代码
Jun 29 Javascript
嵌入式iframe子页面与父页面js通信的方法
Jan 20 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
Sep 02 Javascript
jquery实现加载进度条提示效果
Nov 23 Javascript
鼠标悬停小图标显示大图标
Jan 22 Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 Javascript
jQuery实现链接的title快速出现的方法
Feb 20 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
Jun 29 Javascript
基于zTree树形菜单的使用实例
Dec 25 Javascript
Vue之mixin全局的用法详解
Aug 22 Javascript
微信小程序的部署方法步骤
Sep 04 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原理的opcodes(操作码)
2010/10/26 PHP
PHP下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
PHP根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
extjs form textfield的隐藏方法
2008/12/29 Javascript
用js做一个小游戏平台 (一)
2009/12/29 Javascript
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
2010/04/29 Javascript
javascript中String类的subString()方法和slice()方法
2011/05/24 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
2013/11/26 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
React学习笔记之条件渲染(一)
2017/07/02 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
python实现连接mongodb的方法
2015/05/08 Python
python daemon守护进程实现
2016/08/27 Python
Django1.7+python 2.78+pycharm配置mysql数据库
2016/10/09 Python
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
什么是数组名
2012/05/10 面试题
学习雷锋寄语大全
2014/04/11 职场文书
研究生导师推荐信
2014/09/06 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
小学生交通安全寄语
2015/02/27 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书
房屋产权证明书
2015/06/19 职场文书
2019年度开业庆典祝福语大全!
2019/07/05 职场文书
Win11怎么把合并的任务栏分开 Win11任务栏合并分开教程
2022/04/06 数码科技