jQuery.each方法

jQuery.each方法是jQuery的核心工具方法之一，通用例遍方法，可用于例遍对象和数组。不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。通常需要两个参数

object:需要例遍的对象或数组。

callback:每个成员/元素执行的回调函数。

回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。

例遍数组，同时使用元素索引和内容。举例如下：

//例遍对象，同时使用成员名称和变量内容。

$.each( [0,1,2], function(i, n){alert( "Item #" + i + ": " + n );
});
//例遍对象，同时使用成员名称和变量内容。

$.each( { name: "John", lang: "JS" }, function(i, n){alert( "Name: " + i + ", Value: " + n );
});

当然也可以直接使用实例调用

$( 'div' ).each( function(i,n){return i+n.text;
} )

其实在源码中实例（原型）方法也是调用的静态方法，所以分析each方法只需要分析其静态方法即可，实例调用只不过是静态方法使用中的一个特例罢了。

// Execute a callback for every element in the matched set.// (You can seed the arguments with an array of args, but this is// only used internally.)each: function( callback, args ) {return jQuery.each( this, callback, args );},

在原型方法中直接把this对象当作待遍历的对象传入，下面是静态方法的源码

// args is for internal usage onlyeach: function( object, callback, args ) {var name, i = 0,length = object.length,isObj = length === undefined || jQuery.isFunction( object );if ( args ) {if ( isObj ) {for ( name in object ) {if ( callback.apply( object[ name ], args ) === false ) {break;}}} else {for ( ; i < length; ) {if ( callback.apply( object[ i++ ], args ) === false ) {break;}}}// A special, fast, case for the most common use of each} else {if ( isObj ) {for ( name in object ) {if ( callback.call( object[ name ], name, object[ name ] ) === false ) {break;}}} else {for ( ; i < length; ) {if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {break;}}}}return object;},

东西也不是很多，首先接受3个参数，这个时候就要注意了在我们经常使用的手册中一般是写的两个参数的我们一般使用也是使用两个参数，但是其实在源码中是有3个参数可以接受的，其中第三个参数是一个数组，会作为回调函数的参数传入。

首先声明几个变量，i、name和length是为循环做准备的，isObj是为了区分待便利的参数是数组还是对象，通过判断该参数如果是函数或者length属性不存在来判断是对象，其他的就按数组或者类数组来处理。

isObj = length === undefined || jQuery.isFunction( object );
这一句写的很精简利用运算符的优先顺序先执行===

其实这样的判断并不是很精准只是一个大致的区分，比如：

var obj={length:'a'};
var isObj= obj.length=== undefined || jQuery.isFunction( obj );
alert(isObj); //false

然后就是根据是否添加第三个参数进行区分，先看下没有添加的情况也就是

} else {if ( isObj ) {for ( name in object ) {if ( callback.call( object[ name ], name, object[ name ] ) === false ) {break;}}} else {for ( ; i < length; ) {if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {break;}}}}

根据isObj变量“区分”数组和对象，对于数组使用for循环，对于对象采用for...in循环，每循环一此就会执行一次回调函数并把当前循环的数组或者对象键和值传进去，这里使用的call方法，第一个参数是函数的“this”也就是把当前循环的值作为this后面两个是键和值或者是指针和值，所以我们使用循环中使用回调函数的第二个参数跟使用this是一样的。比如：

//刚才的例子$( 'div' ).each( function(i,n){return i+n.text;} )
//等价于$( 'div' ).each( function(i,n){return i+this.text;} )

对于添加了第三个参数的情况而言就是改变了回调函数的传值方式，使用的是apply方法来传递参数，this指向的依然是当前值只不过把args也就是第三个参数数组传递进去，这个数组有多少参数那么回调函数就有多少参数可以用，这里需要注意的是第三个一定是js原声数组形式不能是类数组或者jQuery对象否则会报错因为apply方法不支持。如果回调函数返回false那么将跳过循环比如我们可以只处理奇数下标数组是可以判断是偶数项时在回调函数中执行return false即可

return object;

最后返回原对象或者数组等。

http://www.jb51.net/article/69033.htm

转载于:https://www.cnblogs.com/sunscheung/p/4727246.html

jQuery.each方法相关推荐

jQuery 事件方法大全
Dom : Attribute:$("p").addClass(css中定义的样式类型); 给某个元素添加样式$("img").attr({src:" ...
jQuery on()方法
jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法 ...
JQuery Attributes 方法说明
转:http://blog.sina.com.cn/s/blog_5ea2cb7e0100c4cx.html JQuery Attributes 方法说明(2009-02-17 01:02:33) 标 ...
Jquery getJSON方法分析（一）
准备工作 ·Customer类 public class Customer { public int Unid { get; set; } public string Customer ...
jQuery 遍历方法
jQuery 遍历方法方法描述 add() 把元素添加到匹配元素的集合中 addBack() 把之前的元素集添加到当前集合中 andSelf() 在版本 1.8 中被废弃.addBack() 的别 ...
jquery ajax html方法吗,jQuery ajax方法
jQuery AJAX 方法 jQuery load() 方法是简单强大的AJAX方法.从服务器加载数据,并将数据显示在被选中元素中. 语法: $(selector).load(URL,data,ca ...
jquery订阅发布插件代码草稿，为jquery扩展jquery.publish，jquery.subscribe方法
jquery订阅发布插件代码草稿! jquery订阅发布插件代码草稿,为jquery扩展jquery.publish,jquery.subscribe方法 --- jquery订阅发布插件代码草稿 & ...
jQuery Css方法
jQuery css() 方法 css() 方法设置或返回被选元素的一个或多个样式属性. 返回 CSS 属性如需返回指定的 CSS 属性的值,请使用如下语法: css("propertyn ...
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
$('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count ...
js进阶 11-6 jquery如何获取和设置元素的宽高（jquery多方法）
js进阶 11-6 jquery如何获取和设置元素的宽高(jquery多方法) 一.总结一句话总结:jquery里面多是方法啊,比如jquery对象的宽高.所以取值是方法,赋值就是方法里面带参数. ...

jQuery.each方法

jQuery.each方法相关推荐

最新文章

热门文章