jQuery中$.each()方法的使用
$.each()是对数组,json和dom结构等的遍历,说一下他的使用方法吧。
1、遍历一维数组
var arr1=['aa','bb','cc','dd'];
$.each(arr1,function(i,val){ //两个参数,第一个参数表示遍历的数组的下标,第二个参数表示下标对应的值
console.log(i+'```````'+val);
输出的结果为:
0```````aa
1```````bb
2```````cc
3```````dd
2、遍历二维数组
var arr2=[['aaa','bbb'],['ccc','ddd'],['eee','fff']];
$.each(arr2,function(i,item){ //两个参数,第一个参数表示下标,第二个参数表示一维数组中的每一个数组
console.log(i+'````'+item);
输出的结果为:
0````aaa,bbb
1````ccc,ddd
2````eee,fff
此时可以对输出的一维数组进行遍历
$.each(item,function(i,val){ //遍历二维数组
console.log(i+'`````'+val);
})
输出的结果为:
0````aaa,bbb
0`````aaa
1`````bbb
1````ccc,ddd
0`````ccc
1`````ddd
2````eee,fff
0`````eee
1`````fff
3、处理json
var json1={key1:'a',key2:'b',key3:'c'};
$.each(json1,function(key,value){ //遍历键值对
console.log(key+'````'+value);
})
输出的结果为:
key1````a
key2````b
key3````c 4、当二位数组中有json对象时
var arr3=[{name:'n1',age:18},{name:'n2',age:20},{name:'n3',age:22}];
$.each(arr3,function(i,val){
console.log(i+'`````'+val);
//输出
/* 0`````[object Object] 1`````[object Object] i2`````[object Object]*/
console.log(val.name); //获取每一个json里面的name值
console.log(val["name"]);
$.each(val,function(key,val2){
console.log(key+'```'+val2);
})
});
5、处理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($('input:hidden'),function(i,val){
console.log(i+'````'+val);
/*0````[object HTMLInputElement]
1````[object HTMLInputElement]
2````[object HTMLInputElement]
3````[object HTMLInputElement]*/
console.log(val.name+'`````'+val.value);
/* aaa`````111
bbb`````222
ccc`````333
ddd`````444*/
})
以上就是$.each()最基本的使用了,
jQuery中还有另外一种写法来遍历元素
$("input:hidden").each(function(i,val){ //第一个参数表示索引下标,第二个参数表示当前索引元素
alert(i);
alert(val.name);
alert(val.value);
});
jQuery中$.each()方法的使用的更多相关文章
- jquery 通过submit()方法 提交表单示例
jquery 通过submit()方法 提交表单示例: 本示例:以用户注册作为例子.使用jquery中的submit()方法实现表单提交. 注:本示例仅提供了对表单的验证,本例只用选用了三个字段作为测 ...
- jquery.on()超级方法
$.on()方法是jquery1.7之后的一个超级方法,将事件绑定和事件委托整合到一个函数中去,支持绑定多个事件,并且可以绑定自定义事件.使用起来很方便. demo传送门 事件委托 首先说一下事件委托 ...
- 重写jquery的ajax方法
//首先备份下jquery的ajax方法 var _ajax=$.ajax; //重写jquery的ajax方法 $.ajax=function(opt){ //备份opt中error和success ...
- jQuery的extend方法
jq中的extend在面试中经常会被问道,今天我总结一个下有关于extend的用法三种进行对比,可能不全,希望大家指点, 用法一: $.extend({}) ,为jQuery类添加方法,可以理解为扩 ...
- jQuery中eq()方法用法实例
本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...
- HTML 5 的自定义 data-* 属性和jquery的data()方法的使用
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...
- 深度理解Jquery 中 offset() 方法
参考原文:深度理解Jquery 中 offset() 方法
- [转]jQuery的each方法的几种常用的用法
下面提一下jQuery的each方法的几种常用的用法 复制代码 代码如下: var arr = [ "one", "two", "three&quo ...
- jquery中$.ajax方法提交表单
function postdata(){ //提交数据函数 $.ajax({ //调用jqu ...
- JS,JQuery的扩展方法
转 http://blog.csdn.net/tuwen/article/details/11464693 //JS的扩展方法: 1 定义类静态方法扩展 2 定义类对象方法扩展 ...
随机推荐
- 中国IT史上两大严重事故对我们的警醒及预防措施
20190121 一,历史回顾:20150528携程运维大事故 2015年5月28日上午11点开始,携程旅行网官方网站突然显示404错误页,App也无法使用,业务彻底中断. 据称是因为乌云网公布了携程 ...
- Swift LeetCode 目录 | Catalog
请点击页面左上角 -> Fork me on Github 或直接访问本项目Github地址:LeetCode Solution by Swift 说明:题目中含有$符号则为付费题目. 如 ...
- Java笔试题库之选题题篇【141-210题】
141.Struts框架可以支持以下哪种程序开发语言? A.C B.C++ C.Java D.C# 解答:C 142.在Servlet处理请求的方式为. A.以进程的方式 B.以程序的方式 C.以线程 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇:传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- Linux 进程终止后自动重启
/opt/a.sh #! /bin/bash ps -ef | grep python3 a.py | grep -v grep | grep python3 if [ $? -ne 0 ] then ...
- Springboot整合Elastic-Job
Elastic-Job是当当网的任务调度开源框架,有以下功能 分布式调度协调 弹性扩容缩容 失效转移 错过执行作业重触发 作业分片一致性,保证同一分片在分布式环境中仅一个执行实例 自诊断并修复分布式不 ...
- 【带着canvas去流浪(8)】碰撞
目录 一. canvas的能力 二. 动画框架 三. 在canvas中模拟碰撞 3.1定义小球的属性 3.2 生成新的小球 3.3 帧动画绘制函数step 3.4 定义小球的update方法 3.5 ...
- 30分钟ES6从陌生到熟悉
前言 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了.它的目标,是使得 JavaScript 语言可以用来编写复杂的 ...
- Spring学习(零):我们为什么要学习Spring
序言 通过使用Spring的IoC容器,可以对这些耦合关系(对Java代码而言)实现一个简单的文本化的操作:即是说通过一个或几个XML文文件,我们就可以方便的对应用对象的耦合关系进行浏览.修改和维护, ...
- 【经典案例】Python详解设计模式:策略模式
完成一项任务往往有多种方式,我们将其称之为策略. 比如,超市做活动,如果你的购物积分满1000,就可以按兑换现金抵用券10元,如果购买同一商品满10件,就可以打9折,如果如果购买的金额超过500,就可 ...