jquery $.each()遍历array,map等集合
2019独角兽企业重金招聘Python工程师标准>>>
1、$.each( collection, callback(indexInArray, valueOfElement) )
$.each()函数和$(selector).each()不一样。$.each()函数可以用来遍历任何一个集合,不管是一个JavaScript对象或者是一个数组,如果是一个数组的话,回调函数每次传递一个数组的下标和这个下标所对应的数组的值(这个值也可以在函数体中通过this关键字获取,但是JavaScript通常会把this这个值当作一个对象即使他只是一个简单的字符串或者是一个数字),这个函数返回所遍历的对象,也就是这个函数的第一个参数,注意这里还是原来的那个数组,这是和map的区别。
其中collection代表目标数组,callback代表回调函数(自己定义),回调函数的参数第一个是数组的下标,第二个是数组的元素。当然我们也可以给回调函数只设定一个参数,这个参数一定是下标,而没有参数也是可以的。
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//例子:———传入数组
<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
$.each([52, 97], function(index, value) {
alert(index + ‘: ‘ + value);
});
</script>
</body>
</html>
//输出
0: 52
1: 97
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//例子:———如果一个映射作为集合使用,回调函数每次传入一个键-值对
<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
var map = {
‘flammable’: ‘inflammable’,
‘duh’: ‘no duh’
};
$.each(map, function(key, value) {
alert(key + ‘: ‘ + value);
});
</script>
</body>
</html>
//输出
flammable: inflammable
duh: no duh
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//例子:———回调函数中 return false时可以退出$.each(), 如果返回一个非false 即会像在for循环中使用continue 一样, 会立即进入下一个遍历
<!DOCTYPE html>
<html>
<head>
<style>
div { color:blue; }
div#five { color:red; }
</style>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<div id=”one”></div>
<div id=”two”></div>
<div id=”three”></div>
<div id=”four”></div>
<div id=”five”></div>
<script>
var arr = [ "one", "two", "three", "four", "five" ];//数组
var obj = { one:1, two:2, three:3, four:4, five:5 }; // 对象
jQuery.each(arr, function() { // this 指定值
$(“#” + this).text(“Mine is ” + this + “.”); // this指向为数组的值, 如one, two
return (this != “three”); // 如果this = three 则退出遍历
});
jQuery.each(obj, function(i, val) { // i 指向键, val指定值
$(“#” + i).append(document.createTextNode(” – ” + val));
});
</script>
</body>
</html>
// 输出
Mine is one. – 1
Mine is two. – 2
Mine is three. – 3
- 4
- 5
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//例子:———遍历数组的项, 传入index和value
<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
$.each( ['a','b','c'], function(i, l){
alert( “Index #” + i + “: ” + l );
});
</script>
</body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//例子:———遍历对象的属性,传入 key和value
<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
$.each( { name: “John”, lang: “JS” }, function(k, v){
alert( “Key: ” + k + “, Value: ” + v );
});
</script>
</body>
</html>
正自评论的例子:
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1. 如果不想输出第一项 (使用retrun true)进入 下一遍历
<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
var myArray=["skipThis", "dothis", "andThis"];
$.each(myArray, function(index, value) {
if (index == 0) {
return true; // equivalent to ‘continue’ with a normal for loop
}
// else do stuff…
alert (index + “: “+ value);
});
</script>
</body>
</html>
2.一个级联下拉框的例子
Js代码
- $(function(){
- function objInit(obj) {//下拉列表框初始化
- return $(obj).html("<option>请选择</option>");
- }
- var arrData = { //定义一个数组保存相关数据
- 厂商1: { 品牌1_1: "型号1_1_1,型号1_1_2", 品牌1_2: "型号1_2_1,型号1_2_2" },
- 厂商2: { 品牌2_1: "型号2_1_1,型号2_1_2", 品牌2_2: "型号2_2_1,型号2_2_2" },
- 厂商3: { 品牌3_1: "型号3_1_1,型号3_1_2", 品牌3_2: "型号3_2_1,型号3_2_2" }
- };
- $.each(arrData, function(pF) { //遍历数据增加厂商项
- $("#selF").append("<option>" + pF + "</option>");
- });
- $("#selF").change(function() { //厂商列表框选项改变事件
- objInit("#selT");
- objInit("#selC");
- $.each(arrData, function(pF, pS) {
- if ($("#selF option:selected").text() == pF) { //如果厂商选中项与数据匹配
- $.each(pS, function(pT, pC) { //遍历数据增加品牌项
- $("#selT").append("<option>" + pT + "</option>");
- });
- $("#selT").change(function() { //品牌列表框选项改变事件
- objInit("#selC");
- $.each(pS, function(pT, pC) {
- if ($("#selT option:selected").text() == pT) { //如果品牌选中项与数据匹配
- $.each(pC.split(","), function() { //遍历数据增加型号项
- $("#selC").append("<option>" + this + "</option>");
- });
- }
- });
- });
- }
- });
- });
- $("#Button1").click(function() { //注册按钮单击事件
- var strValue = "您选择的厂商:";
- strValue += $("#selF option:selected").text();
- strValue += " 您选择的品牌:";
- strValue += $("#selT option:selected").text();
- strValue += " 您选择的型号:";
- strValue += $("#selC option:selected").text();
- $("#divTip")
- .show()
- .addClass("clsTip")
- .html(strValue); //显示提示信息并增加样式
- });
- })
转载于:https://my.oschina.net/airship/blog/833726
jquery $.each()遍历array,map等集合相关推荐
- 【Groovy】map 集合 ( map 集合遍历 | 使用 map 集合的 each 方法遍历 map 集合 | 代码示例 )
文章目录 一.使用 map 集合的 each 方法遍历 map 集合 二.代码示例 一.使用 map 集合的 each 方法遍历 map 集合 遍历 map 集合 , 可以调用 map 集合的 eac ...
- 使用entrySet遍历Map类集合KV,而不是keySet方式进行遍历
使用entrySet遍历Map类集合KV,而不是keySet方式进行遍历
- 使用 entrySet 遍历 Map 类集合 KV ,而不是 keySet 方式进行遍历的好处
使用 entrySet 遍历 Map 类集合 KV ,而不是 keySet 方式进行遍历. 说明: keySet 其实是遍历了 2 次,一次是转为 Iterator 对象,另一次是从 hashMap ...
- js中数据结构数组Array、映射Map、集合Set、对象、JSON
全栈工程师开发手册 (作者:栾鹏) js系列教程5-数据结构和算法全解 js中数据结构 js中原生自带的数据结构比较简单,主要有数组Array.映射Map.集合Set.我们可以根据这三个基本数据结构实 ...
- java遍历一个map集合_Java遍历Map集合的四种方式
Map 集合的遍历与 List 和 Set 集合不同.Map 有两组值,因此遍历时可以只遍历值的集合,也可以只遍历键的集合,也可以同时遍历.Map 以及实现 Map 的接口类(如 HashMap.Tr ...
- Map集合及遍历 debug用法 以及集合的斗地主应用练习 D190326
Map集合及遍历 debug用法 以及集合的斗地主应用练习 第一个独立应用:斗地主,分步骤一点点把项目拆分每一步去完成. 01_第一章:回顾_三种集合的存储方式: 02_第一章:Map集合_常用方法: ...
- js Array Map and Set
Array slice slice()就是对应String的substring()版本,它截取Array的部分元素,然后返回一个新的Array: var arr = ['A', 'B', 'C', ' ...
- python的array如何使用map_你应该了解的JavaScript Array.map()五种用途小结
前言 从经典的 for 循环到 forEach() 方法,用于迭代数据集合的各种技术和方法比比皆是.但是现在比较流行的方法是 .map() 方法. .map() 通过指定函数调用一个数组中每一项元素, ...
- java iterator map_Java循环遍历输出map方法
1.使用entries来遍历(entrySet()的返回值也是返回一个Set集合,此集合的类型为Map.Entry) 使用说明:该方法只能用于java 5或者更高的版本:如果遍历的map是一个空值,循 ...
- Java SE基础知识详解第[12]期—集合(Set、Collections、Map、集合嵌套)
写在前面: 每一个不曾起舞的日子,都是对生命的辜负. 希望看到这里的每一个人都能努力学习,不负韶华,成就更好的自己. 以下仅是个人学习过程中的一些想法与感悟,Java知识博大精深,作为初学者,个人能力 ...
最新文章
- 利用OpenCV的SimpleBlobDetector检测图像的奇异区域(斑点)
- 102.怎么学好软件工程?软件工程 = 工具 + 方法 + 过程
- RMAN CONFIGURE解释
- 20150917-html第二次课
- VMware16虚拟机:下载和安装教程
- Python调整图片透明度
- 计算机内存4gb是多大,手机内存多大才不卡?专家:4GB足矣
- 联想r720安装固态_联想LenovoR720游戏笔记本如何安装固态硬盘
- js实现椭圆轨迹_用js实现一组图片同心椭圆周运动 图片有从小到大渐近效果
- 2018ACM/ICPC 焦作网络预选赛-A Magic Mirror
- CF633H Fibonacci-ish II
- 基金投资入门 4:指数基金
- [原创]佰志达SBO网上商城系统业务框架介绍
- CF1380D.Berserk And Fireball 【2000】你值得学习的【思维】+【模拟】+【贪心】
- win11 任务栏显示所有图标 不需要任何插件 (win11 22h2 版本已失效)
- 字节跳动裁员不发年终奖致员工与HR薅头发互殴?字节回应来了
- 《SolidWorks 2014中文版机械设计从入门到精通》——1.4 操作环境设置
- STM32的脉冲宽度调制(PWM)
- 双频无线路由器两个wifi信号合并
- 登录失败过多导致账户被锁