jquery中$each()方法的使用指南

2024-08-17 13:37:53

$.each()与$(selector).each()不同, 后者专用于jquery对象的遍历, 前者可用于遍历任何的集合(无论是数组或对象),如果是数组,回调函数每次传入数组的索引和对应的值(值亦可以通过this 关键字获取,但javascript总会包装this 值作为一个对象—尽管是一个字符串或是一个数字),方法会返回被遍历对象的第一参数.

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，2
alert(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 three
alert(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，函数的参数args
var name, i = 0,length = object.length;
if (args) {
if (length == undefined) {
for (name in object) {
if (callback.apply(object[name], args) === false) {
break;
}
}
} else {
for (; i < length;) {
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 object;
}

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类似。

以上所述就是本文的全部内容了，希望大家能够喜欢。

JQuery跳出each循环的方法

一.jquery each循环,要实现break和continue的功能: break----用return false; continue --用return ture; 二.jquery怎么跳出当前的each循环有些朋友可能会以为在jquery跳出循环可以直接使用continue和break了,但是使用之后没有效果,因为在jquery中没有这两条命令. 后来上网查了下,得到了结果: return false;--跳出所有循环:相当于 javascript 中的 break 效果. retu
Jquery中的$.each获取各种返回类型数据的使用方法

var arr = [ "one", "two", "three", "four"]; $.each(arr, function(){ alert(this); }); 上面这个each输出的结果分别为:one,two,three,four var arr = [ "aaa", "bbb", "ccc" ]; $.each(arr, function(i,a){ al
jQuery中$.each使用详解

通过它,你可以遍历对象.数组的属性值并进行处理. 使用说明 each函数根据参数的类型实现的效果不完全一致: 1.遍历对象(有附加参数) $.each(Object, function(p1, p2) { this; //这里的this指向每次遍历中Object的当前属性值 p1; p2; //访问附加参数 }, ['参数1', '参数2']); 2.遍历数组(有附件参数) $.each(Array, function(p1, p2){ this; //这里的this指向每次遍历中Array的当
jquery使用each方法遍历json格式数据实例

本文实例讲述了jquery使用each方法遍历json格式数据的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q
jQuery函数map()和each()介绍及异同点分析

方法语法:map() map(callback) 为包装集中的每一个元素调用回调函数,并将返回值收集到jQuery对象的实例中. 参数 callback (函数)回调函数,为包装集中的每个元素调用该函数. 比如,下面的代码将页面上所有div元素的id值收集到一个javascript数组中: 复制代码代码如下: var iDs = $("div").map(function(){ return (this.id==undefined) ? null :this.id; }).g
jQuery $.each遍历对象、数组用法实例

通过它,你可以遍历对象.数组的属性值并进行处理. 使用说明 each函数根据参数的类型实现的效果不完全一致: 1.遍历对象(有附加参数) 复制代码代码如下: $.each(Object, function(p1, p2) { this; //这里的this指向每次遍历中Object的当前属性值 p1; p2; //访问附加参数 }, ['参数1', '参数2']); 2.遍历数组(有附件参数) 复制代码代码如下: $.each(Array, function(p
jQuery中使用each处理json数据

eg:给传进来的ID中当其对应的值为true时,即给对应的ID标签添加一个class 名为 focus,如: var obj = { id01:'true', id02:'flase', id03:'true'}; $.each(obj,function(key,val){ if(val == 'true'){ $('#' + key).addClass('focus'); } }); 结果:ID为id01及id03的标签会添加一个class标签: eg2: json数据如下: [ {"Id&
jQuery中each()方法用法实例

本文实例讲述了jQuery中each()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以以匹配元素集合中每一个元素作为上下文去执行一个函数. 当每次执行函数时,函数的执行环境都是一个匹配元素集合中不同的DOM元素,并且会将此元素在集合中索引传递给此函数,索引值是从0开始的.通过返回false可用于提早停止循环运行,返回true将继续执行函数,直到匹配元素中每一个元素都遍历完成. each()方法不同于jQuery.each()方法 .each()方法只能够遍历JQuery对象,而jQu
jquery中$each()方法的使用指南

$.each()与$(selector).each()不同, 后者专用于jquery对象的遍历, 前者可用于遍历任何的集合(无论是数组或对象),如果是数组,回调函数每次传入数组的索引和对应的值(值亦可以通过this 关键字获取,但javascript总会包装this 值作为一个对象-尽管是一个字符串或是一个数字),方法会返回被遍历对象的第一参数. each()方法能使DOM循环结构简洁,不容易出错.each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组.多维数组.DOM, J
jq源码解析之绑在$,jQuery上面的方法(实例讲解)

1.当我们用$符号直接调用的方法.在jQuery内部是如何封装的呢?有没有好奇心? // jQuery.extend 的方法是绑定在 $ 上面的. jQuery.extend( { //expando 用于决定当前页面的唯一性. /\D/ 非数字.其实就是去掉小数点. expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "" ), // Assume jQuery is ready wit
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法

情景目前有个需求是在文本框填入内容,自动触发keyup事件,下拉列表会自动过滤相应的选项,但是使用了$,ajax后发现,每次触发事件时,都导致整个网页闪烁,触发了全局ajax事件代码片段 $.ajax({ type: "POST", url: root + "/xxx, data: requestData, dataType: "json", success: function(data){ // 清空列表 $("#formOpinion #
jQuery抛物线运动实现方法(附完整demo源码下载)

本文实例讲述了jQuery抛物线运动实现方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 完整实例代码点击此处本站下载. 具体代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>抛物线运动效果</title> <style type="text/css"> .boll
jQuery中prevAll()方法用法实例

本文实例讲述了jQuery中prevAll()方法用法.分享给大家供大家参考.具体分析如下: 此方法查找匹配元素集合之前所有的同辈元素. 同辈元素集合可以通过选择器进行筛选. 语法结构: 复制代码代码如下: $("selector").prevAll(expr) 参数列表: 参数描述 expr 可选.用于过滤的表达式. 实例代码: 实例一: 复制代码代码如下: <!DOCTYPE html> <html> <head> <meta cha
jQuery的text()方法用法分析

本文实例讲述了jQuery的text()方法用法.分享给大家供大家参考.具体分析如下: 此方法返回或者设置匹配元素的文本内容. 如需了解更多相关内容可参阅参考手册text()方法. 特别说明: HTML内容就是内容中可以包含HTML标签,并且能够被浏览器渲染. 文本内容是先将内容中的HTML预定义字符转换成html字符实体,这样HTML标签就不会被渲染. text()方的使用: 用法一: 此方法不带参数时候,功能是取得所有匹配元素的文本内容,并且结果是由所有匹配元素包含的文本内容组合起来的文本.
jquery中post方法用法实例

本文实例讲述了jquery中post方法的用法,分享给大家供大家参考.具体用法分析如下: 在使用jquery实现网站的异步交互时,常用的两个函数为get和post方法,get方法使用很简单,直接提交get请求即可,如果有参数,直接追加到url后面就行,但是使用post方法时,传递参数,需要和url分开写,使得传参变得麻烦了,不过这样做起来更安全一些,而且出现中文乱码的概率也要低一些(get方法传中文很多情况下会出现乱码现象),这里就详细介绍一下post是怎样传递参数的. 首先写一个html代码如
jQuery的one()方法用法实例

本文实例讲述了jQuery的one()方法用法.分享给大家供大家参考.具体分析如下: 为匹配元素的特定事件绑定一个一次性的事件处理方法. 在语法上one()方法和bind()方法是一样的,它们的不同在于绑定的处理方法的执行次数. 语法结构: 复制代码代码如下: $(selector).one(event,data,function) 参数列表: 参数描述 type 定义绑定到匹配元素中的事件类型. 如果有多个事件使用空格分隔. data 可选.传递给事件对象的额外数据对象. function
jQuery常用数据处理方法小结

本文实例总结了jQuery常用数据处理方法.分享给大家供大家参考.具体如下: $.trim():删除字符串前后的空白字符. var str = ' 薯条 '; var formatStr = $.trim(str); //'薯条' $.param():数组或者对象序列化. var obj = { name: 'dog', count: 10 }; var str = $.param(obj); //"name=dog&count=10" $.isArray():检测是否为数组.
jQuery中get方法用法分析

本文实例讲述了jQuery中get方法用法.分享给大家供大家参考,具体如下: 参数:url,[data],[callback],[type] url 待载入页面的URL地址. data 待发送 Key/value 参数. callback 载入成功时回调函数. type 返回内容格式,xml, html, script, json, text, _default. 案例1 表单代码: <form id="form1" action="#"> <p&

jquery中$each()方法的使用指南

相关推荐

随机推荐