jquery 中Map、each的应用

jQuery.map( array, callback(elementOfArray, indexInArray) )

The function can return:

• the translated value, which will be mapped to the resulting array
• null or undefined, to remove the item
• an array of values, which will be flattened into the full array

$.map( [0,1,2], function(n){
return n + 4;
}); 

[4, 5, 6]

Map官方定义：将一组数组转换为其他数组。

通俗一点说：也就是根据当前数组创建一个新的数组，怎么创建由自己来定义

Map的语法： $.map(arr,callback);

                  arr为当前数组，callback为要执行的方法也就是如何改变这个数组

下面我们做一个例子来实验一下：

    首先我们要声明一个数组，其中包括1,2,3,4,5，然后通过Map函数转换为2,4,6,8,10，的数组下面是相关代码：

//声明一个数组

       var arr = [1, 2, 3];

       //将数组转换成另一个数组,第一个参数为要转换的数组，第二个参数为执行的方法

       var arr2 = $.map(arr, function (item) { return item * 2; });

/function（item）当中的参数item为当前数组的每一个元素。

创建arr2的数组，然后我们需要循环遍历输出此数组：

在jquery中没有foreach，那么我们需要用另一个函数来代替C#中的foreach，即each

each的语法： $.each(arr,function(){});

第一个参数为要循环的对象，第二个参数为执行的方法

也可以这么写:$("div").each(function(){});

这句代码的意思为：在所有div标签的元素当中执行后面的方法.

大致原理为：从第一个元素开始循环，循环完此元素，则开始找下一个元素，如果找到则返回true继续执行，相当于c#中的continue

如果没有找到则返回false，结束执行相当于C#中的break

方法中不传入参数则this就是当前的循环的中的元素

现在我们试着循环此数组：

/遍历输出数组，each相当于foreach 第一个参数为要输出的数组，第二个参数为怎么输出，不传参则用this代替数组中的元素

       $.each(arr2, function () { alert(this); });

       //键值对的数组,键值对的数组用大括号

       var jian = { "myname": "王五", "age": 12 };

       $.each(jian, function (k, v) { alert(k + "为：" + v) });

       //如果只是普通的遍历用不带参数的方法，如果是键值对则用带参的.

each数组还可以用于键值对数组的输出

$.each(jian, function (k, v){ alert(k + "为：" + v) });
k表示键 V 表示值

这大概相当于C#中的dictionary

json对象

var jsonData = {"tom": 20, "jerry": 21 };

$.each(jsonData,function (key, value) {

     alert(key + "_" + value);
});

结果:tom_20, jerry_21

 

$.each(jsonData,function (i) {

     alert(jsonData[i]);

});

结果:20,21

 jquery对象的map方法

map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象。

.map(callback(index,domElement)) 

由于返回值是 jQuery 封装的数组，使用 get() 来处理返回的对象以得到基础的数组。

.map() 方法对于获得或设置元素集的值特别有用。请思考下面这个带有一系列复选框的表单：

<form method="post" action="">
  <fieldset>
    <div>
      <label for="two">2</label>
      <input type="checkbox" value="2" id="two" name="number[]">
    </div>
    <div>
      <label for="four">4</label>
      <input type="checkbox" value="4" id="four" name="number[]">
    </div>
    <div>
      <label for="six">6</label>
      <input type="checkbox" value="6" id="six" name="number[]">
    </div>
    <div>
      <label for="eight">8</label>
      <input type="checkbox" value="8" id="eight" name="number[]">
    </div>
  </fieldset>
</form>
我们能够获得复选框 ID 组成的逗号分隔的列表：
$(':checkbox').map(function() {
  return this.id;
}).get().join(',');

亲自试一试

本次调用的结果是字符串："two,four,six,eight"。

在 callback 函数内部，this 引用每次迭代的当前 DOM 元素。该函数可返回单独的数据项，或者是要被插入结果集中的数据项的数组。如果返回的是数组，数组内的元素会被插入集合中。如果函数返回 null 或 undefined，则不会插入任何元素。

参考：http://www.w3school.com.cn/jquery/traversing_map.asp