jquery $.each()遍历array，map等集合 - 一瓢江湖 - ITeye博客
博客分类：
1、$.each( collection, callback(indexInArray, valueOfElement) )
$.each()函数和$(selector).each()不一样。$.each()函数可以用来遍历任何一个集合，不管是一个JavaScript对象或者是一个数组，如果是一个数组的话，回调函数每次传递一个数组的下标和这个下标所对应的数组的值（这个值也可以在函数体中通过this关键字获取，但是JavaScript通常会把this这个值当作一个对象即使他只是一个简单的字符串或者是一个数字），这个函数返回所遍历的对象，也就是这个函数的第一个参数，注意这里还是原来的那个数组，这是和map的区别。
其中collection代表目标数组，callback代表回调函数（自己定义），回调函数的参数第一个是数组的下标，第二个是数组的元素。当然我们也可以给回调函数只设定一个参数，这个参数一定是下标，而没有参数也是可以的。
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//例子:———传入数组
&!DOCTYPE html&
&script src=”/jquery-latest.js”&&/script&
$.each([52, 97], function(index, value) {
alert(index + ‘: ‘ + value);
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//例子:———如果一个映射作为集合使用,回调函数每次传入一个键-值对
&!DOCTYPE html&
&script src=”/jquery-latest.js”&&/script&
var map = {
‘flammable’: ‘inflammable’,
‘duh’: ‘no duh’
$.each(map, function(key, value) {
alert(key + ‘: ‘ + value);
flammable: inflammable
duh: no duh
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//例子:———回调函数中 return false时可以退出$.each(), 如果返回一个非false 即会像在for循环中使用continue 一样, 会立即进入下一个遍历
&!DOCTYPE html&
& div { color: }
& div#five { color: }
& &/style&
& &script src=”/jquery-latest.js”&&/script&
& &div id=”one”&&/div&
& &div id=”two”&&/div&
& &div id=”three”&&/div&
& &div id=”four”&&/div&
& &div id=”five”&&/div&
&&& 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));
Mine is one. – 1
Mine is two. – 2
Mine is three. – 3
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//例子:———遍历数组的项, 传入index和value
&!DOCTYPE html&
&script src=”/jquery-latest.js”&&/script&
$.each( ['a','b','c'], function(i, l){
alert( “Index #” + i + “: ” + l );
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//例子:———遍历对象的属性,传入 key和value
&!DOCTYPE html&
&script src=”/jquery-latest.js”&&/script&
$.each( { name: “John”, lang: “JS” }, function(k, v){
alert( “Key: ” + k + “, Value: ” + v );
正自评论的例子:
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1. 如果不想输出第一项 (使用retrun true)进入 下一遍历
&!DOCTYPE html&
&script src=”/jquery-latest.js”&&/script&
var myArray=["skipThis", "dothis", "andThis"];
$.each(myArray, function(index, value) {
if (index == 0) {
// equivalent to ‘continue’ with a normal for loop
// else do stuff…
alert (index + “: “+ value);
2.一个级联下拉框的例子
$(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")
.addClass("clsTip")
.html(strValue); //显示提示信息并增加样式
浏览 40012
浏览: 103127 次
楼主威武。Jquery 获取对象的几种方式介绍
字体：[ ] 类型：转载 时间：
本文为大家介绍下Jquery如何获取对象有哪几种方式，感兴趣的朋友可以参考下
1、JQuery的核心的一些方法 each(callback) '就像循环 $("Element"). ‘元素的个数，是个属性 $("Element").size(); '也是元素的个数，不过带括号是个方法 $("Element").get(); ‘某个元素在页面中的集合，以数组的形式存储 $("Element").get(index); '功能和上面的相同，index表示第几个元素，数组的下标 $("Element").get().reverse(); ‘把得到的数组方向 $("Element1").index($("Element2")); '元素2在元素1中的索引值是。 2、基本对象获取(注意这里获取的都是Jquery对象而不是Dom对象哦，但是他俩是可以转换滴) $("*") ‘表示获取所有对象 但是我至今没这样用过 $("#XXX") '获得 id=XXX 的元素对象（id可以是标签的id或CSS样式id） 常用 $("input[name='username']") 获得input标签中name='userName'的元素对象 常用 $(".abc") ' 获得样式class的名字是.abc的元素对象 常用 $("div") ' 标签选择器 选择所有的div元素 常用 $("#a,.b,span") '表示获得ID是a的元素和使用了类样式b的元素以及所有的span元素 $("#a .b p") 'ID号是a的并且使用了 b样式的 所有的p元素 3、层级元素获取 $("Element1 Element2 Element3 ....") '前面父级 后面是子集 $("div & p") '获取div下面的所有的 p元素 $("div + p") 'div元素后面的第一个 p元素 $("div ~ p") 'div后面的所有的 p元素 4、简单对象获取 $("Element:first") 'HTML页面中某类元素的第一个元素 $("Element:last") 'HTML页面中某类元素的最后一个元素 $("Element:not(selector)") '去除所有与给定选择器匹配的元素,如：$("input:not(:checked)") 表示选择所有没有选中的复选框 $("Element:even") '获得偶数行 $("Element:odd“）'获得奇数行 $("Element:eq(index)") '取得一个给定的索引值 $("Element:gt(index)") '取得给定索引值的元素 之后的所有元素 $("Element:lt(index)") '取得给定索引值的元素 之前的所有元素 5、内容对象的获取和对象可见性 $("Element:contains(text)") '元素中是否包含text文本内容 $('Element:empty") '获得元素不包含子元素或文本的 $("Element:partnt") '获得元素包含子元素或文本的 $("Element:has(selector)") ‘是否包含某个元素， 如：$("p:has(span)")表示所有包含span元素的p元素 $("Element:hidden") '选择所有可见元素 $("Element:visible") '选择所有不可见元素 6、其他对象获取方法 $("Element[id]") '所有带有ID属性的元素 $("Element[attribute = youlika ]" '获得所有某个属性为youlika的元素 $("Element[attribute != youlika ]" '获得所有某个属性为不是youlika的元素 $("Element[attribute ^= youlika ]" '获得所有某个属性为不是youlika的开头的元素 $("Element[attribute $= youlika ]" '获得所有某个属性为不是youlika的结尾的元素 $("Element[attribute *= youlika ]" '获得所有某个属性包含youlika的开头的元素 $("Element[selector1][selector2][....]") '符合属性选择器，比如$("input[id][name][value=youlika ]")表示获得带有ID、Name以及value是youlika 的input元素。 7、子元素的获取 $("Element:nth-child(index)") '选择父级下面的第n个元素 $("Element:nth-child(even)") '选择父级下面的偶数 $("Element:nth-child(odd)") '选择父级下面的奇数 $("Element:nth-child(3n+1)") '表达式 $("Element:first-child") '选择父级下面的第一个子元素 $("Element:last-child") '选择父级下面的最后一个子元素 $("Element:only-child") '匹配父级下的唯一的一个子级元素，例如dt在dl列表中唯一，那么将选择dt 8、表单对象获取 $(:input)//查找所有的Input元素，当然也包括下拉列表，文本域，单选框，复选框等。 $(:text)//匹配所有的单行文本框 $(:password)//匹配所有的密码框 $(:radio)//匹配所有的单选按钮 $(:checkbox)//匹配所有的复选框 $(:submit)//匹配所有的提交按钮 $(:image)//匹配所有的图像域，例如 $(:reset)//匹配所有的重置按钮 $(:button)//匹配所有的按钮 $(:file)//匹配所有的文件上传域 $(:hidden)//匹配所有的不可见元素或者type为hidden的元素 $(:enabled)//匹配所有可用的input元素，比如radio:enabled表示匹配所有可用的单选按钮 $(:disabled)//匹配所有的不可用input元素，作用与上相反 $(:checked)//匹配所有选中的复选框元素 $(:selected)//匹配所有的下拉列表 9、元素属性的设置与移除 $("Element").attr(name) '取得第一个匹配的属性值，比如$("img").attr("src") $("Element".attr(key,value)") '某一个元素设置属性 $("Element".attr({key:value,key1:value,....})) ‘为某个元素一次性设置多个属性 $("Element").attr(key,function) '为所有匹配的元素设置一个计算的属性值。 $("Element").removeAttr(name)//移除某一个属性
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具JQuery $.each遍历JavaScript数组对象实例
投稿：whsnow
字体：[ ] 类型：转载 时间：
声明了一个JSON字符串直接遍历，在Chrome控制台下面报错，解决方法是将JSON字符串转换为JavaScript对象
查看一个简单的jQuery的例子来遍历一个JavaScript数组对象。
var json = [
{"id":"1","tagName":"apple"},
{"id":"2","tagName":"orange"},
{"id":"3","tagName":"banana"},
{"id":"4","tagName":"watermelon"},
{"id":"5","tagName":"pineapple"}
$.each(json, function(idx, obj) {
alert(obj.tagName);
上面的代码片断工作正常，提示 “apple”, “orange” … 等，如预期一样。
问题: JSON 字符串
下面的例子中，声明了一个JSON字符串（随附单或双引号）直接地。
var json = '[{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"},
{"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"},
{"id":"5","tagName":"pineapple"}]';
$.each(json, function(idx, obj) {
alert(obj.tagName);
在Chrome中，它显示在控制台下面的错误：
Uncaught TypeError: Cannot use 'in' operator to search for '156'
in [{"id":"1","tagName":"apple"}...
解决方案：JSON字符串转换为JavaScript对象。
要修复它，通过标准JSON.parse()或jQuery 的 $.parseJSON 将其转换为JavaScript对象。
var json = '[{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"},
{"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"},
{"id":"5","tagName":"pineapple"}]';
$.each(JSON.parse(json), function(idx, obj) {
alert(obj.tagName);
$.each($.parseJSON(json), function(idx, obj) {
alert(obj.tagName);
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具jquery 如何获取某个标签下面的img标签？ - ITeye问答
现在可以通过 var $current = $("#slideshow div.current");获取&selection&标签，如何获取此标签下面的img属性，然后获取此img的宽度？
采纳的答案
var $current = $("#slideshow div.current")
在使用find()方法可以找到子元素然后遍历
$current.find("img").each(function(i){
$(this).width();//就是他的宽度
$("#slideshow div.current img").attr('width');
我理解的对吗 ？
jquery的选择器和css差不多的，css怎么获取，jquery就怎么获取
比如css支持#slideShow&.curent&img& 那么jquery就可以用
$("#slideShow&.curent&img")获取到
还包括子孙选择器 等等
var img = $('.current img')
var imgArr = $("#slideshow selection img");& //这是一个数组
循环数组分别获取宽度
$.each(imgArr, function(){
&& alert($(this).attr('width'));
});
已解决问题
未解决问题1657人阅读
前端面试之基础篇[前端你别闹]（31）
1、JQuery的核心的一些方法
each(callback) ‘就像循环
$("Element"). ‘元素的个数，是个属性
$("Element").size(); ’也是元素的个数，不过带括号是个方法
$("Element").get(); ‘某个元素在页面中的集合，以数组的形式存储
$("Element").get(index); ’功能和上面的相同，index表示第几个元素，数组的下标
$("Element").get().reverse(); ‘把得到的数组方向
$("Element1").index($("Element2")); ’元素2在元素1中的索引值是。。。
2、基本对象获取(注意这里获取的都是Jquery对象而不是Dom对象哦，但是他俩是可以转换滴)
‘表示获取所有对象
但是我至今没这样用过
$("#XXX") ’获得 id=XXX 的元素对象（id可以是标签的id或CSS样式id） 常用
$("input[name='username']")
获得input标签中name='userName'的元素对象 常用
$(".abc") ' 获得样式class的名字是.abc的元素对象
$("div") ' 标签选择器 选择所有的div元素
$("#a,.b,span") '表示获得ID是a的元素和使用了类样式b的元素以及所有的span元素
$("#a .b p") 'ID号是a的并且使用了 b样式的 所有的p元素
3、层级元素获取
$("Element1 Element2 Element3 ....")
$("div & p")
$("div + p")
$("div ~ p")
4、简单对象获取
$("Element:first") 'HTML页面中某类元素的第一个元素
$("Element:last") 'HTML页面中某类元素的最后一个元素
$("Element:not(selector)") '去除所有与给定选择器匹配的元素,如：$("input:not(:checked)") 表示选择所有没有选中的复选框
$("Element:even") '获得偶数行
$("Element:odd“）'获得奇数行
$("Element:eq(index)")
'取得一个给定的索引值
$("Element:gt(index)")
'取得给定索引值的元素
之后的所有元素
$("Element:lt(index)")
'取得给定索引值的元素
之前的所有元素
5、内容对象的获取和对象可见性
$("Element:contains(text)") '元素中是否包含text文本内容
$('Element:empty") '获得元素不包含子元素或文本的
$("Element:parent") '获得元素包含子元素或文本的
$("Element:has(selector)") ‘是否包含某个元素， 如：$("p:has(span)")表示所有包含span元素的p元素
$("Element:hidden") '选择所有可见元素
$("Element:visible") '选择所有不可见元素
6、其他对象获取方法
$("Element[id]") '所有带有ID属性的元素
$("Element[attribute = youlika ]" '获得所有某个属性为youlika的元素
$("Element[attribute != youlika ]" '获得所有某个属性为不是youlika的元素
$("Element[attribute ^= youlika ]" '获得所有某个属性为不是youlika的开头的元素
$("Element[attribute $= youlika ]" '获得所有某个属性为不是youlika的结尾的元素
$("Element[attribute *= youlika ]" '获得所有某个属性包含youlika的开头的元素
$("Element[selector1][selector2][....]") ’符合属性选择器，比如$("input[id][name][value=youlika ]")表示获得带有ID、Name以及value是youlika 的input元素。
7、子元素的获取
$("Element:nth-child(index)")
$("Element:nth-child(even)")
$("Element:nth-child(odd)")
$("Element:nth-child(3n+1)")
$("Element:first-child")
$("Element:last-child")
$("Element:only-child")
8、表单对象获取
$(:password)
$(:checkbox)
$(:submit)
$(:button)
$(:hidden)
$(:enabled)
$(:disabled)
$(:checked)
$(:selected)
9、元素属性的设置与移除
$("Element").attr(name) '取得第一个匹配的属性值，比如$("img").attr("src")
$("Element".attr(key,value)") '某一个元素设置属性
$("Element".attr({key:value,key1:value,....})) ‘为某个元素一次性设置多个属性
$("Element").attr(key,function) '为所有匹配的元素设置一个计算的属性值。
$("Element").removeAttr(name)
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：40902次
积分：1307
积分：1307
排名：千里之外
原创：63篇
转载：17篇
译文：29篇
(10)(1)(6)(6)(20)(33)(15)(14)(4)