详解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 第二课 操作包装集元素代码
Mar 14 Javascript
google 搜索框添加关键字实现代码
Apr 24 Javascript
javascript在myeclipse中报错的解决方法
Oct 29 Javascript
JS画线(实例代码)
Nov 20 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
用JS实现轮播图效果(二)
Jun 26 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
JS实现类似51job上的地区选择效果示例
Nov 17 Javascript
基于Axios 常用的请求方法别名(详解)
Mar 13 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 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单件模式结合命令链模式使用说明
2008/09/07 PHP
php checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
解析MySql与Java的时间类型
2013/06/22 PHP
php导入导出excel实例
2013/10/25 PHP
PHP的PDO操作简单示例
2016/03/30 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
php 利用socket发送GET,POST请求的实例代码
2020/07/04 PHP
jquery 表单取值常用代码
2009/12/22 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
2013/09/10 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
jQuery选择器中的特殊符号处理方法
2017/09/08 jQuery
JavaScript对象属性操作实例解析
2020/02/04 Javascript
如何实现iframe父子传参通信
2020/02/05 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
Python中作用域的深入讲解
2018/12/10 Python
详解Python的数据库操作(pymysql)
2019/04/04 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
django实现日志按日期分割
2020/05/21 Python
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
现代家居用品及礼品:LBC Modern
2018/06/24 全球购物
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
计算机专业学生求职信分享
2013/12/15 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
党的群众路线调研报告
2014/11/03 职场文书
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫
Win11 BitLocker 驱动器加密
2022/04/19 数码科技
关于pytest结合csv模块实现csv格式的数据驱动问题
2022/05/30 Python
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android