详解Jquery 遍历数组之$().each方法与$.each()方法介绍

$().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为当前遍历到的对象

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别

    JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别

    原生js使用forEach()与jquery使用each()遍历数组,return false 的区别: 1.使用each()遍历数组a,如下: var a=[20,21,22,23,24]; $.each(a, function(index,val) { console.log('index='+index); if(index==2){ return false; } console.log('val='+val); }); 结果如下: 从运行的效果可以看出,return 相当于循环中的br

  • JQuery $.each遍历JavaScript数组对象实例

    查看一个简单的jQuery的例子来遍历一个JavaScript数组对象. var json = [ {"id":"1","tagName":"apple"}, {"id":"2","tagName":"orange"}, {"id":"3","tagName":"banana&q

  • jQuery $.each遍历对象、数组用法实例

    通过它,你可以遍历对象.数组的属性值并进行处理. 使用说明 each函数根据参数的类型实现的效果不完全一致: 1.遍历对象(有附加参数) 复制代码 代码如下: $.each(Object, function(p1, p2) { this;       //这里的this指向每次遍历中Object的当前属性值      p1; p2;     //访问附加参数 }, ['参数1', '参数2']); 2.遍历数组(有附件参数) 复制代码 代码如下: $.each(Array, function(p

  • jQuery使用$.each遍历json数组的简单实现方法

    本文实例讲述了jQuery使用$.each遍历json数组的简单实现方法.分享给大家供大家参考,具体如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&quo

  • jquery使用each方法遍历json格式数据实例

    本文实例讲述了jquery使用each方法遍历json格式数据的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q

  • 浅析jQuery 遍历函数，javascript中的each遍历

    jQuery 遍历函数 jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. 函数 描述 .add() 将元素添加到匹配元素的集合中. .andSelf() 把堆栈中之前的元素集添加到当前集合中. .children() 获得匹配元素集合中每个元素的所有子元素. .closest() 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素. .contents() 获得匹配元素集合中每个元素的子元素,包括文本和注释节点. .each() 对 jQuery 对象进行迭代,为每个匹配元

  • jQuery通用的全局遍历方法$.each()用法实例

    本文实例讲述了jQuery通用的全局遍历方法$.each()用法.分享给大家供大家参考,具体如下: 1.test.json文件代码: [ { "username": "张三", "content": "沙发." }, { "username": "李四", "content": "板凳." }, { "username": &q

  • jquery中each遍历对象和数组示例

    通用遍历方法,可用于遍历对象和数组.$().each(),回调函数拥有两个参数: 第一个为对象的成员或数组的索引,第二个为对应变量或内容.如需退出each循环可使回调函数返回false 现有如下两个select 计划类别: <select id="PLANTYPE"> <option value="0">-所有-</option> <option value="1">新建</option>

  • JQuery中使用.each()遍历元素学习笔记

    今天写一个选项卡的时候,需要用到jquery中的.each(),通过获取each()中的index参数来获取li元素的编号,方便下面区块显示,在一个测试页面上写好了下面的代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

  • jquery 遍历数组 each 方法详解

    JQuery拿取对象的方式 $('#id') :通过元素的id $('tagName') : 通过元素的标签名 $('tagName tagName') : 通过元素的标签名,eg: $('ul li') $('tagName#id): 通过元素的id和标签名 $(':checkbox'):拿取input的 type为checkbox'的所有元素: Eg: <input type="checkbox" name="appetizers" value="

随机推荐