Jquery使用each函数实现遍历及数组处理


Posted in jQuery onJuly 14, 2020

each()方法能使DOM循环结构简洁,不容易出错。each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组、多维数组、DOM, JSON 等等

在javaScript开发过程中使用$each可以大大的减轻我们的工作量。

下面提一下each的几种常用的用法

each处理一维数组

var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]   
 $.each(arr, function(i, item){   
   
$.each(item,function(j,val){
    

 alert(j);
    

alert(val);
   }); 
});

alert(i)将输出0,1,2

alert(val)将输出aaa,bbb,ccc

each处理二维数组

var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']] 

$.each(arr, function(i, item){ 
alert(i); 
alert(item); 

});

arr2为一个二维数组,item相当于取这二维数组中的每一个数组。

item[0]相对于取每一个一维数组里的第一个值

alert(i)将输出为0,1,2,因为这二维数组含有3个数组元素

alert(item)将输出为 ['a', 'aa', 'aaa'],['b', 'bb', 'bbb'],['c', 'cc', 'ccc']

对此二位数组的处理稍作变更之后

var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']] 
$.each(arr, function(i, item){ 

$.each(item,function(j,val){


 alert(j);


alert(val);
 }); 
});

alert(j)将输出为0,1,2,0,1,2,0,1,2
alert(val)将输出为a,aa,aaa,b,bb,bbb,c,cc,ccc

each处理json数据,这个each就有更厉害了,能循环每一个属性

var obj = { one:1, two:2, three:3};   
 
each(obj, function(key, val) {   
   
alert(key);  
   
alert(val);   
 
});

这里alert(key)将输出one two three

alert(val)将输出one,1,two,2,three,3

这边为何key不是数字而是属性呢,因为json格式内是一组无序的属性-值,既然无序,又何来数字呢。
而这个val等同于obj[key]

ecah处理dom元素,此处以一个input表单元素作为例子。

如果你dom中有一段这样的代码

<input name="aaa" type="hidden" value="111" />
<input name="bbb" type="hidden" value="222" />
<input name="ccc" type="hidden" value="333" />
<input name="ddd" type="hidden" value="444"/>

然后你使用each如下

$.each($("input:hidden"), function(i,val){ 
   alert(val);
   alert(i);
   alert(val.name);
   alert(val.value);  
 });

那么,alert(val)将输出[object HTMLInputElement],因为它是一个表单元素。
alert(i)将输出为0,1,2,3

alert(val.name);将输出aaa,bbb,ccc,ddd,如果使用this.name将输出同样的结果
alert(val.value); 将输出111,222,333,444,如果使用this.value将输出同样的结果

如果将以上面一段代码改变成如下的形式

$("input:hidden").each(function(i,val){
  alert(i);
  alert(val.name);
  alert(val.value);    
});

可以看到,输出的结果是一样的,至于两种写法究竟区别在哪,我也还不知。此改变运用到上面几段数组的操作也会输出同样的结果。

这样,几个例子的实际结果已经得到答案。接着再继续往下研究,总不能知其然不知其所以然。

从以上的例子中可知jQuery和jQuery对象都实现了该方法,对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法。

看下jQuery中的each实现(网络摘抄)

function (object, callback, args) {
//该方法有三个参数:进行操作的对象obj,进行操作的函数fn,函数的参数args
  var name, i = 0,length = object.length;
  if (args) {
    if (length == undefined) {
      for (name in object) {
        if (callback.apply(object[name], args) === false) {
          break;
        }
      }
    } else {
      for (; i < length;) {
        if (callback.apply(object[i++], args) === false) {
          break;
        }
      }
    }
  } else {
    if (length == undefined) {
      for (name in object) {
        if (callback.call(object[name], name, object[name]) === false) {
          break;
        }
      }
    } else {
      for (var value = object[0]; i < length && callback.call(value, i, value) !== false; value = object[++i]) {}
      /*object[0]取得jQuery对象中的第一个DOM元素,通过for循环,
      得到遍历整个jQuery对象中对应的每个DOM元素,通过 callback.call( value,i,value);
      将callback的this对象指向value对象,并且传递两个参数,i表示索引值,value表示DOM元素;
      其中callback是类似于 function(index, elem) { ... } 的方法。
      所以就得到 $("...").each(function(index, elem){ ... });
      */
    }
  }
  return object;
}

jquery会自动根据传入的元素进行判断,然后在根据判断结果采取apply还是call方法的处理。在fn的实现中,可以直接采用this指针引用数组或是对象的子元素。

1.obj对象是数组

each方法会对数组中子元素的逐个进行fn函数调用,直至调用某个子元素返回的结果为false为止,也就是说,我们可以在提供的fn函数进行处理,使之满足一定条件后就退出each方法调用。当each方法提供了arg参数时,fn函数调用传入的参数为arg,否则为:子元素索引,子元素本身

2.obj 对象不是数组

该方法同1的最大区别是:fn方法会被逐次不考虑返回值的进行进行。换句话说,obj对象的所有属性都会被fn方法进行调用,即使fn函数返回false。调用传入的参数同1类似。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
jquery添加div实现消息聊天框
Feb 08 jQuery
jQuery实现简单三级联动效果
Sep 05 jQuery
jQuery实现影院选座订座效果
Apr 13 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 #jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 #jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 #jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 #jQuery
jQuery 实现扁平式小清新导航
Jul 07 #jQuery
jQuery 动态粒子效果示例代码
Jul 07 #jQuery
jQuery实现简单飞机大战
Jul 05 #jQuery
You might like
解析php中die(),exit(),return的区别
2013/06/20 PHP
php进行支付宝开发中return_url和notify_url的区别分析
2014/12/22 PHP
php制作简单模版引擎
2016/04/07 PHP
使用Firebug对js进行断点调试的图文方法
2011/04/02 Javascript
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
js字符串完全替换函数分享
2014/12/03 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
javascript框架设计之类工厂
2015/06/23 Javascript
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
Vue使用json-server进行后端数据模拟功能
2018/04/17 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
学习Vue组件实例
2018/04/28 Javascript
vue-cli webpack 引入swiper的操作方法
2018/09/15 Javascript
微信小程序使用车牌号输入法的示例代码
2019/08/20 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
JavaScript实现猜数字游戏
2020/05/20 Javascript
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
Python实现字典去除重复的方法示例
2017/07/31 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
从零实现一个自定义html5播放器的示例代码
2017/08/01 HTML / CSS
蛋白质世界:Protein World
2017/11/23 全球购物
应届生保险求职信
2013/11/11 职场文书
家长会主持词开场白
2014/03/18 职场文书
2014年纠风工作总结
2014/12/08 职场文书
幼师中班个人总结
2015/02/12 职场文书
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA