jquery的each()详细介绍 - 萧萧的技术博客空间 - 博客园
each()方法能使DOM循环结构简洁，不容易出错。each()函数封装了十分强大的遍历功能，使用也很方便，它可以遍历一维数组、多维数组、DOM, JSON 等等在javaScript开发过程中使用$each可以大大的减轻我们的工作量。下面提一下each的几种常用的用法&&each处理一维数组&&var&arr1&=&[&"aaa",&"bbb",&"ccc"&];&&&&&&& $.each(arr1,&function(i,val){&&&&&&&&&&&&alert(i);&&&&&&&&&alert(val);&&});&&&alert(i)将输出0，1，2alert(val)将输出aaa，bbb，ccc&&each处理二维数组 &　　var&arr2&=&[['a',&'aa',&'aaa'],&['b',&'bb',&'bbb'],&['c',&'cc',&'ccc']]&&&&&&　　$.each(arr,&function(i,&item){&&&&&&&&&&&&alert(i);&&&&&&&&&alert(item);&&&&&&　　});&&arr2为一个二维数组，item相当于取这二维数组中的每一个数组。item[0]相对于取每一个一维数组里的第一个值& &alert(i)将输出为0，1，2，因为这二维数组含有3个数组元素alert(item)将输出为& ['a', 'aa', 'aaa']，['b', 'bb', 'bbb']，['c', 'cc', 'ccc']&对此二位数组的处理稍作变更之后&var&arr&=&[['a',&'aa',&'aaa'],&['b',&'bb',&'bbb'],&['c',&'cc',&'ccc']]&&&&&&&　　$.each(arr,&function(i,&item){&&&&&&&&&&&&　　$.each(item,function(j,val){&&&&&&&　　　　&alert(j);&&&&&&&&　　　　alert(val);&&&&　});&});&&&&&alert(j)将输出为0，1，2，0，1，2，0，1，2&alert(val)将输出为a，aa，aaa，b，bb，bbb，c，cc，ccc&&&each处理json数据，这个each就有更厉害了，能循环每一个属性&&& &&　　var&obj&=&{&one:1,&two:2,&three:3};&&&&&&&　　each(obj,&function(key,&val)&{&&&&&&&&&&&&　　alert(key);&&&&&&&&&　　alert(val);&&&&&&&　　});&&&这里alert(key)将输出one two threealert(val)将输出one，1，two，2，three,3这边为何key不是数字而是属性呢，因为json格式内是一组无序的属性-值，既然无序，又何来数字呢。而这个val等同于obj[key]&ecah处理dom元素，此处以一个input表单元素作为例子。如果你dom中有一段这样的代码&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如下&$.each($("input:hidden"), function(i,val){ &&& & alert(val);&& & alert(i);&&&& alert(val.name);&& & alert(val.value);& &&});&&那么，alert(val)将输出[object HTMLInputElement]，因为它是一个表单元素。 &&alert(i)将输出为0，1，2，3&alert(val.name);将输出aaa,bbb,ccc,ddd，如果使用this.name将输出同样的结果alert(val.value);& 将输出111,222,333,444，如果使用this.value将输出同样的结果&如果将以上面一段代码改变成如下的形式&&$("input:hidden").each(function(i,val){&&&&alert(i);&&&&alert(val.name);&&&&alert(val.value);&&&&&&&});&可以看到，输出的结果是一样的，至于两种写法究竟区别在哪，我也还不知。此改变运用到上面几段数组的操作也会输出同样的结果。&这样，几个例子的实际结果已经得到答案。接着再继续往下研究，总不能知其然不知其所以然。&从以上的例子中可知jQuery和jQuery对象都实现了该方法，对于jQuery对象，只是把each方法简单的进行了委托：把jQuery对象作为第一个参数传递给jQuery的each方法。看下jQuery中的each实现（网络摘抄）&function&(object,&callback,&args)&{//该方法有三个参数:进行操作的对象obj，进行操作的函数fn，函数的参数argsvar&name,&i&=&0,length&=&object.if&(args)&{if&(length&==&undefined)&{for&(name&in&object)&{if&(callback.apply(object[name],&args)&===&false)&{break;}}}&else&{for&(;&i&&&)&{if&(callback.apply(object[i++],&args)&===&false)&{break;}}}}&else&{if&(length&==&undefined)&{for&(name&in&object)&{if&(callback.call(object[name],&name,&object[name])&===&false)&{break;}}}&else&{for&(var&value&=&object[0];&i&&&length&&&&callback.call(value,&i,&value)&!==&false;&value&=&object[++i])&{}/*object[0]取得jQuery对象中的第一个DOM元素，通过for循环，得到遍历整个jQuery对象中对应的每个DOM元素，通过&callback.call(&value,i,value);将callback的this对象指向value对象，并且传递两个参数,i表示索引值，value表示DOM元素；其中callback是类似于&function(index,&elem)&{&...&}&的方法。所以就得到&$("...").each(function(index,&elem){&...&});*/}}return&}&jquery会自动根据传入的元素进行判断，然后在根据判断结果采取apply还是call方法的处理。在fn的实现中，可以直接采用this指针引用数组或是对象的子元素。1.obj对象是数组each方法会对数组中子元素的逐个进行fn函数调用，直至调用某个子元素返回的结果为false为止，也就是说，我们可以在提供的fn函数进行处理，使之满足一定条件后就退出each方法调用。当each方法提供了arg参数时，fn函数调用传入的参数为arg，否则为：子元素索引，子元素本身2.obj&对象不是数组该方法同1的最大区别是：fn方法会被逐次不考虑返回值的进行进行。换句话说，obj对象的所有属性都会被fn方法进行调用，即使fn函数返回false。调用传入的参数同1类似。
阅读(...) 评论()问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
题目可能没有说的很清楚，请看下面详细说明。
通过 $.each() 循环数据得到如图表格，然后需要按照数据生成 echart 图表。
series : [
name: '地市名称',
type:'bar',
stack: '地区',
data:[120, 132, 101, 134, 90, 230, 210, 400, 500, 200]
name 为地市名称，data 为 [ 第二列 ~ 第十一列 ] 的数据。
在这种数据很多的情况下，如何通过循坏的方式生成图表？
表格循坏代码
$.each(resp, function(i,item) {
html += '&tr&';
html += '&td&'+ item.cityName +'&/td&';
html += '&td class="mobileOpenNum"&'+ item.mobileOpenNum +'&/td&';
html += '&td class="mobileBroadbandNum"&'+ item.mobileBroadbandNum +'&/td&';
html += '&td class="mobileMailNum"&'+ item.mobileMailNum +'&/td&';
html += '&td class="mmsNum"&'+ item.mmsNum +'&/td&';
html += '&td class="crbtNum"&'+ item.crbtNum +'&/td&';
html += '&td class="schoolNewsNum"&'+ item.schoolNewsNum +'&/td&';
html += '&td class="flow50Num"&'+ item.flow50Num +'&/td&';
html += '&td class="package188Num"&'+ item.package188Num +'&/td&';
html += '&td class="mobileNewsNum"&'+ item.mobileNewsNum +'&/td&';
html += '&td class="otherNum"&'+ item.otherNum +'&/td&';
html += '&/tr&';
$busiTypeTbody.html(html);
图表怎样用类似方式生成设置？
series : [
name: item.cityName,
type:'bar',
stack: '地区',
data:[item.mobileOpenNum, item.xxx, item.xxx, item.xxx, item.xxx, item.xxx]
我刚尝试了一下如下方法:
var opionSeries = [];
$.each(resp, function(i,item) {
var opionData = '';
opionData += '['
opionData += ''+ item.mobileOpenNum +','
opionData += ''+ item.mobileBroadbandNum +','
opionData += ''+ item.mobileMailNum +','
opionData += ''+ item.mmsNum +','
opionData += ''+ item.crbtNum +','
opionData += ''+ item.schoolNewsNum +','
opionData += ''+ item.flow50Num +','
opionData += ''+ item.package188Num +','
opionData += ''+ item.mobileNewsNum +','
opionData += ''+ item.otherNum +''
opionData += ']'
opionSeries.push({name: item.cityName, type: "bar", stack: "地区", data: opionData});
出了点问题，数据乱了。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
var opionSeries = [];
$.each(resp, function(i,item) {
var opionData = new Array(
item.mobileOpenNum,
item.mobileBroadbandNum,
item.mobileMailNum,
item.mmsNum,
item.crbtNum,
item.schoolNewsNum,
item.flow50Num,
item.package188Num,
item.mobileNewsNum,
item.otherNum
opionSeries.push({name: item.cityName,barWidth: "50px", type: "bar", stack: "地区", });
已解决，是我拼接数组弄错了
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
告诉我，谁教你这么拼数组的？
同步到新浪微博
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：jQuery 遍历函数
jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。
将元素添加到匹配元素的集合中。
把堆栈中之前的元素集添加到当前集合中。
获得匹配元素集合中每个元素的所有子元素。
从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。
获得匹配元素集合中每个元素的子元素，包括文本和注释节点。
对 jQuery 对象进行迭代，为每个匹配元素执行函数。
结束当前链中最近的一次筛选操作，并将匹配元素集合返回到前一次的状态。
将匹配元素集合缩减为位于指定索引的新元素。
将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。
获得当前匹配元素集合中每个元素的后代，由选择器进行筛选。
将匹配元素集合缩减为集合中的第一个元素。
将匹配元素集合缩减为包含特定元素的后代的集合。
根据选择器检查当前匹配元素集合，如果存在至少一个匹配元素，则返回 true。
将匹配元素集合缩减为集合中的最后一个元素。
把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象。
获得匹配元素集合中每个元素紧邻的同辈元素。
获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。
获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止。
从匹配元素集合中删除元素。
获得用于定位的第一个父元素。
获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。
获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）。
获得当前匹配元素集合中每个元素的祖先元素，直到遇到匹配选择器的元素为止。
获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）。
获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。
获得每个元素之前所有的同辈元素，直到遇到匹配选择器的元素为止。
获得匹配元素集合中所有元素的同辈元素，由选择器筛选（可选）。
将匹配元素集合缩减为指定范围的子集。
each的用法
&1.数组中的each
var arr = [ "one", "two", "three", "four"];
$.each(arr, function(){
alert(this);
//上面这个each输出的结果分别为：one,two,three,four
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
alert(item[0]);
//其实arr1为一个二维数组，item相当于取每一个一维数组，
//item[0]相对于取每一个一维数组里的第一个值
//所以上面这个each输出分别为：1
var obj = { one:1, two:2, three:3, four:4};
$.each(obj, function(i) {
alert(obj[i]);
//这个each就有更厉害了，能循环每一个属性
//输出结果为：1
2.遍历Dom元素中
&script type="text/javascript" src="/jquery/jquery.js"&&/script&
&script type="text/javascript"&
$(document).ready(function(){
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
&button&输出每个列表项的值&/button&
&li&Coffee&/li&
&li&Milk&/li&
&li&Soda&/li&
依次弹出Coffee，Milk，Soda
&3.each和map的比较
下面的例子是获取每一个多框的ID值；
each方法：
定义一个空数组，通过each方法，往数组添加ID值；最后将数组转换成字符串后，alert这个值；
$(function(){
var arr = [];
$(":checkbox").each(function(index){
arr.push(this.id);
var str = arr.join(",");
alert(str);
将每个:checkbox执行return this.id；并将这些返回值，自动的保存为jQuery对象，然后用get方法将其转换成原生Javascript数组，再使用join方法转换成字符串，最后alert这个值；
$(function(){
var str = $(":checkbox").map(function() {
return this.
}).get().join();
alert(str);
当有需一个数组的值的时候，用map方法，很方便。
&4.jquery中使用each
例遍数组，同时使用元素索引和内容。（i是索引，n是内容）
$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
例遍对象，同时使用成员名称和变量内容。（i是成员名称，n是变量内容）
$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );
例遍dom元素，此处以一个input表单元素作为例子。 如果你dom中有一段这样的代码 &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如下
$.each($("input:hidden"), function(i,val){
alert(val); //输出[object HTMLInputElement]，因为它是一个表单元素。
alert(i); //输出索引为0，1，2，3
alert(val.name); //输出name的值
alert(val.value); //输出value的值
5.each中根据this查找元素
实现效果&回复&两个字只有在鼠标经过的时候才显示出来
&ol class="commentlist"&
&li class="comment"&
&div class="comment-body"&
&p&嗨，第一层评论&/p&
&div class="reply"&
&a href="#" class=".comment-reply-link"&回复&/a&
&ul class="children"&
&li class="comment"&
&div class="comment-body"&
&p&第二层评论&/p&
&div class="reply"&
&a href="#" class=".comment-reply-link"&回复&/a&
&/div&&/li&
js代码如下
$("div.reply").hover(function(){
$(this).find(".comment-reply-link").show();
},function(){
$(this).find(".comment-reply-link").hide();
实现效果，验证判断题是否都有选择
&ul id="ulSingle"&
&li class="liStyle"&
1.&&阿斯顿按时&label id="selectTips" style="display: none" class="fillTims"&请选择&/label&
&!--begin选项--&
&li class="liStyle2"&
&span id="repSingle_repSingleChoices_0_labOption_0"&A
&/span&.阿萨德发&input type="hidden" name="repSingle$ctl00$repSingleChoices$ctl00$hidID" id="repSingle_repSingleChoices_0_hidID_0" value="1" /&
&input id="repSingle_repSingleChoices_0_cheSingleChoice_0" type="checkbox" name="repSingle$ctl00$repSingleChoices$ctl00$cheSingleChoice" /&&/li&
&li class="liStyle2"&
&span id="repSingle_repSingleChoices_0_labOption_1"&B
&/span&.阿萨德发&input type="hidden" name="repSingle$ctl00$repSingleChoices$ctl01$hidID" id="repSingle_repSingleChoices_0_hidID_1" value="2" /&
&input id="repSingle_repSingleChoices_0_cheSingleChoice_1" type="checkbox" name="repSingle$ctl00$repSingleChoices$ctl01$cheSingleChoice" /&&/li&
&li class="liStyle2"&
&span id="repSingle_repSingleChoices_0_labOption_2"&C
&/span&.阿斯顿&input type="hidden" name="repSingle$ctl00$repSingleChoices$ctl02$hidID" id="repSingle_repSingleChoices_0_hidID_2" value="3" /&
&input id="repSingle_repSingleChoices_0_cheSingleChoice_2" type="checkbox" name="repSingle$ctl00$repSingleChoices$ctl02$cheSingleChoice" /&&/li&
&!--end选项--&
//验证单选题是否选中
$("ul#ulSingle&li.liStyle").each(function (index) {
//选项个数
var count = $(this).find("ul&li&:checkbox").
var selectedCount = 0
for (var i = 0; i & i++) {
if ($(this).find("ul&li&:checkbox:eq(" + i + ")").attr("checked")) {
selectedCount++;
if (selectedCount == 0) {
$(this).find("label#selectTips").show();
return false;
$(this).find("label#selectTips").hide();
&ps:传说中attr("property", "value");在部分浏览器中不管用可以用prop，如果只是判断可以用$(this).find("ul&li&:checkbox:eq(" + i + ")").is(":checked");
6.官方解释以下是官方的解释： jQuery.each(object, [callback]) 概述 通用例遍方法，可用于例遍对象和数组。 不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。 参数 objectObject 需要例遍的对象或数组。 callback (可选)Function 每个成员/元素执行的回调函数。
阅读(...) 评论()
作者：Tyler Ning
出处：/tylerdonet
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。jquery为select添加option的代码探讨-前端开发博客
推荐文章 1601Views 3611Views 3973Views 2520Views 4487Views热门文章
33,507Views
30,768Views
16,134Views
15,886Views
12,471Views
12,269Views对这篇文章不满意吗？百度搜索：");}