jQuery内置函数map和each的用法

简介:


$.map的运用

var arr1 = [0, 3, 5];
var arr2 = $.map(arr1, function (item) { return item * 2 });
alert(arr2);

结果:0 6 10

 


$.each的运用

 

普通数组
var arr1 = [0, 3, 5];

$.each(arr1,function (i) {

alert(arr1[i]);

});

结果:0,3,5

 

 

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

 

 

json对象数组($.getJSON里面常用)

var jsonArray = [ { "tom": 20, "jerry": 21 }, { "tom": 22,"jerry": 23} ];

$.each(jsonArray,function (i) {

  alert(jsonArray[i].tom);

});

结果:20,22

 

 

看$.getJSON的一处应用:

$.getJSON(
    "stu/stu_toshowStu",
     {classNum:classNum},
     function(json,status)
    {
     $.each(json,function(i){
      $('#stuDiv').append("<div>学生学号:"+json[i].num+"</div>");
     }
   );
  });


jQuery对象可以直接调用each:

$("input").each(function(){

   $(this).val()........

});

each处理dom元素,此处以一个input表单元素作为例子。

<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,element){  
     alert(val);
     alert(i);
     alert(element.name);
     alert(element.value);   
 });  

alert(element)将输出[object HTMLInputElement],是一个表单元素
alert(i);将输出为0,1,2,3
alert(element.name);将输出aaa,bbb,ccc,ddd,若使用this.name将输出同样的结果
alert(element.value);将输出111,222,333,444,若使用this.value将输出同样的结果
 
$("input:hidden").each(function(i,element){
    alert(i);
    alert(element.name);
    alert(element.value);       
});

输出结果相同

当然比如$("input").css()等封装好的操作自动有一个遍历,就不需要手动遍历了。

 

目录
相关文章
Google Earth Engine(GEE)——从列表中少选所需要的数字不用map函数,还能如何实现?简单方法介绍
Google Earth Engine(GEE)——从列表中少选所需要的数字不用map函数,还能如何实现?简单方法介绍
138 0
|
1月前
|
存储 JavaScript Java
(Python基础)新时代语言!一起学习Python吧!(四):dict字典和set类型;切片类型、列表生成式;map和reduce迭代器;filter过滤函数、sorted排序函数;lambda函数
dict字典 Python内置了字典:dict的支持,dict全称dictionary,在其他语言中也称为map,使用键-值(key-value)存储,具有极快的查找速度。 我们可以通过声明JS对象一样的方式声明dict
136 1
|
7月前
|
JavaScript 前端开发 开发者
flat、flatmap与map的用法区别
本文介绍了 JavaScript 数组方法 `flat()`、`flatMap()` 和 `map()` 的用法及区别。`flat()` 可按指定深度递归展平数组,参数为深度,默认一层;`flatMap()` 结合了 `map()` 和 `flat()` 功能,返回一维数组,长度可能不同于原数组;而 `map()` 返回与原数组长度一致的新数组。通过多个代码示例展示了三者的功能和差异,帮助开发者更好地理解和使用这些方法。
758 0
|
Python
高阶函数如`map`, `filter`, `reduce`和`functools.partial`在Python中用于函数操作
【6月更文挑战第20天】高阶函数如`map`, `filter`, `reduce`和`functools.partial`在Python中用于函数操作。装饰器如`@timer`接收或返回函数,用于扩展功能,如记录执行时间。`timer`装饰器通过包裹函数并计算执行间隙展示时间消耗,如`my_function(2)`执行耗时2秒。
107 3
|
12月前
|
存储 C++ 容器
【C++】map、set基本用法
本文介绍了C++ STL中的`map`和`set`两种关联容器。`map`用于存储键值对,每个键唯一;而`set`存储唯一元素,不包含值。两者均基于红黑树实现,支持高效的查找、插入和删除操作。文中详细列举了它们的构造方法、迭代器、容量检查、元素修改等常用接口,并简要对比了`map`与`set`的主要差异。此外,还介绍了允许重复元素的`multiset`和`multimap`。
293 3
【C++】map、set基本用法
|
数据处理 Python
Pandas中的map函数应用
Pandas中的map函数应用
113 2
WK
|
Python
map函数
在Python中,`map()` 是一个内置的高阶函数,接受一个函数和一个或多个可迭代对象作为参数,将指定函数应用于每个元素,并返回包含应用结果的迭代器。若有多个可迭代对象,其元素会并行地传递给函数。`map()` 返回一个迭代器,需用 `list()` 转换。在Python 3中,`map()` 返回迭代器而非列表,并支持 `lambda` 表达式,适用于多种应用场景。注意,当输入的可迭代对象长度不同时,结果仅包含最短对象的长度。
WK
470 1
|
Java API 容器
Java 8 的流库:Filter、Map、FlatMap 及 Optional 的概念与用法
【6月更文挑战第9天】Java 8 引入了许多强大的新特性,其中流库(Stream API)和 Optional 类极大地简化了集合操作和空值处理。本文将深入探讨 filter、map、flatMap 以及 Optional 的概念和用法,并提供示例代码来展示其实际应用。
484 4
|
存储 人工智能 C++
map容器在C++中的具体用法以及相关注意点
map容器在C++中的具体用法以及相关注意点
259 1
|
JavaScript 前端开发 索引
【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
【5月更文挑战第2天】【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?