jQuery中$.each()方法的使用
2023-09-11 14:22:03 时间
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操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等
- jquery 中$.post获取MVC Controller中JsonResult返回包含LIst<Model>类型的子List<Model>的高级使用方法
- jquery的each()详细介绍
- jQuery源码-jQuery.fn.attr与jQuery.fn.prop
- jquery中 $ 和 jQuery 及 $() 的区别
- jquery检测ie6的方法(修复了BUG)
- Jquery中LigerUi的弹出编辑框方法!
- 每日一学—jQuery css()方法
- 手写 jQuery 框架
- jQuery 常见开发使用技巧总结
- jquery
- 使用jQuery异步传递Model到控制器方法,并异步返回错误信息
- PHP+jQuery 注册模块开发
- Jquery $ajax
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——7.5 技巧:使用日历微件选择日期
- JQuery跳出each循环的方法(包含数组遍历)
- jQuery插件之验证控件jquery.validate.js
- Nice Jquery Validator 方法
- jquery刷新页面方法
- jquery取指定checkbox/radio的选中状态的方法
- 表单验证Jquery扩展方法类
- jQuery 取选中的radio的值方法
- JQuery this和$(this)的区别及获取$(this)子元素对象的方法
- jquery 实现菜单的下拉菜单