详解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 相关文章推荐
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
Nov 02 Javascript
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
深入解析contentWindow, contentDocument
Jul 04 Javascript
jQuery选择器querySelector的使用指南
Jan 23 Javascript
javascript实现Email邮件显示与删除功能
Nov 21 Javascript
微信小程序开发教程之增加mixin扩展
Aug 09 Javascript
js截取字符串功能的实现方法
Sep 27 Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 Javascript
ES6实现图片切换特效代码
Jan 14 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
详解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
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
javascript 实用的文字链提示框效果
2010/06/30 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
浅谈Sizzle的“编译原理”
2015/04/14 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
Python 代码性能优化技巧分享
2012/08/07 Python
在GitHub Pages上使用Pelican搭建博客的教程
2015/04/25 Python
Python每天必学之bytes字节
2016/01/28 Python
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
python将视频转换为全字符视频
2019/04/26 Python
Python API自动化框架总结
2019/11/12 Python
openCV提取图像中的矩形区域
2020/07/21 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
利用CSS3实现折角效果实例源码
2016/09/28 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
一名毕业生的自我鉴定
2013/12/04 职场文书
借名购房协议书范本
2014/10/06 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书