JQuery中$.each 和$(selector).each()的区别详解

1、$(selector).each()

jQuery 遍历 - each() 方法主要用于DOM遍历,each() 方法规定为每个匹配元素规定运行的函数。

语法:

$(selector).each(function(index,element))

W3School上显示回调函数是必须的,index - 选择器的 index 位置,element - 当前的元素(也可使用 "this" 选择器).

$().each,对于这个方法,在dom处理上面用的较多。如果页面有多个input标签类型为checkbox,对于这时用$().each来处理多个checkbook,例如:

$(“input[name=’ch’]”).each(function(i){
    if($(this).attr(‘checked’)==true) {
        //一些操作代码
    }
})

回调函数是可以传递参数,i就为遍历的索引。

对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话说:jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用。

1、遍历对象(没有附加参数)

$.each(Object, function(name, value) {
      this;      //this指向当前属性的值
      name;      //name表示Object当前属性的名称
      value;     //value表示Object当前属性的值
 });
 

2、遍历数组(没有附加参数)

1 $.each(Array, function(i, value) {
2       this;      //this指向当前元素
3       i;         //i表示Array当前下标
4       value;     //value表示Array当前元素
5  });
6  

下面提一下jQuery的each方法的几种常用的用法:

1 var obj = { one:1, two:2, three:3, four:4};
2         $.each(obj,function(i,v){
3             console.log(v);//对象的属性值
4             console.log(obj[i]);//对象的属性值
5             console.log(this);//对象当前属性的值
6         })

var arr = [ "one", "two", "three", "four"];
         $.each(arr, function(i,v){
           alert(this);
           console.log(this);
           console.log(i,arr[i]);
           console.log(v);
           }); 

输出:

JQuery中的each函数在1.3.2的官方文档中的描述如下:

each(callback)

以每一个匹配的元素作为上下文来执行一个函数。

意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整形)。返回 ‘false‘ 将停止循环 (就像在普通的循环中使用 ‘break‘)。返回 ‘true‘ 跳至下一个循环(就像在普通的循环中使用‘continue‘)。

迭代两个图像,并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。

HTML 代码:

1 <img/><img/>jQuery 代码:
2 $("img").each(function(i){
3 this.src = "test" + i + ".jpg";
4 }); 

结果:[ <img src="test0.jpg" />, <img src="test1.jpg" /> ] 
当然,在遍历元素的时候,jquery是允许自定义跳出的,请看示例代码:你可以使用 ‘return‘ 来提前跳出 each() 循环。

$(selector).each(function(index,element))参数 描述 
function(index,element) 必需。为每个匹配元素规定运行的函数。 
?index - 选择器的 index 位置 
?element - 当前的元素(也可使用 "this" 选择器

输出每个 li 元素的文本:

$("button").click(function(){
  $("li").each(function(){
    alert($(this).text())
  });
}); 

实例:

jQuery.each=function( obj, fn, args ) {
  if ( args ) { 
//通过length来判断obj是对象还是数组,很巧妙,数组和对象的区别,数组有length,对象肯定没有,单个对象的length值为undefined
if ( obj.length == undefined ){ for ( var i in obj ) fn.apply( obj, args ); }else{ for ( var i = 0, ol = obj.length; i < ol; i++ ) { 

if ( fn.apply( obj, args ) === false ) break; } } } else { if ( obj.length == undefined ) { for ( var i in obj ) fn.call( obj, i, obj ); }else{ 

for ( var i = 0, ol = obj.length, val = obj[0]; i < ol && fn.call(val,i,val) !== false; val = obj[++i] ){} } } return obj; } 

那怎么跳出each呢 
jquery再遍历选定的对象时候用each比较方便。有种应用是找到里面符合条件的对象后,要跳出这个循环。 
javascript的跳出循环一般用break. 
同事遇到这个问题,下意识 的用了break,想跳出这个循环。结果报错 
SyntaxError: unlabeled break must be inside loop or switch 
经查,应该用一个 
在回调函数里return false即可,大多数jq的方法都是如此的

返回 ‘false‘ 将停止循环 (就像在普通的循环中使用 ‘break‘)。
返回 ‘true‘ 跳至下一个循环(就像在普通的循环中使用‘continue‘)。 
时间: 2024-10-05 05:07:08

JQuery中$.each 和$(selector).each()的区别详解的相关文章

jQuery height()、innerHeight()、outerHeight()函数的区别详解

jQuery height().innerHeight().outerHeight()函数的区别详解 在jQuery中,获取元素高度的函数有3个,它们分别是height(). innerHeight().outerHeight(). 与此相对应的是,获取元素宽度的函数也有3个,它们分别是width(). innerWidth().outerWidth(). 在这里,我们以height().innerHeight().outerHeight()3个函数为例,来详细介绍它们之间的区别. 下面我们以元

cookie 与 session 的区别详解

[转]cookie 与session 的区别详解 二者的定义: 当你在浏览网站的时候,WEB 服务器会先送一小小资料放在你的计算机上,Cookie 会帮你在网站上所打的文字或是一些选择,都纪录下来.当下次你再光临同一个网站,WEB 服务器会先看看有没有它上次留下的 Cookie 资料,有的话,就会依据 Cookie里的内容来判断使用者,送出特定的网页内容给你. Cookie 的使用很普遍,许多有提供个人化服务的网站,都是利用 Cookie来辨认使用者,以方便送出使用者量身定做的内容,像是 Web

浏览器加载模式:window.onload和$(document).ready()的区别(详解)

jQuery库文件是在body元素之前加载的,必须等待所有的DOM元素加载后,延迟支持DOM操作,否则就无法获取到. 在延迟等待加载,JavaScript提供了一个事件为load,方法如下: window.onload = function () {}; //JavaScript等待加载 $(document).ready(function () {}); //jQuery等待加载load和ready区别 window.onload $(document).ready() 执行时机 必须等待网页

【转】escape()、encodeURI()、encodeURIComponent()区别详解

escape().encodeURI().encodeURIComponent()区别详解 原文链接:http://www.cnblogs.com/tylerdonet/p/3483836.html JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent . 下面简单介绍一下它们的区别 1 escape()函数 定义和用法 e

cookie 和session 的区别详解 《转》

二者的定义: 当你在浏览网站的时候,WEB 服务器会先送一小小资料放在你的计算机上,Cookie 会帮你在网站上所打的文字或是一些选择, 都纪录下来.当下次你再光临同一个网站,WEB 服务器会先看看有没有它上次留下的 Cookie 资料,有的话,就会依据 Cookie 里的内容来判断使用者,送出特定的网页内容给你. Cookie 的使用很普遍,许多有提供个人化服务的网站,都是利用 Cookie 来辨认使用者,以方便送出使用者量身定做的内容,像是 Web 接口的免费 email 网站,都要用到 C

escape()、encodeURI()、encodeURIComponent()区别详解

JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent . 下面简单介绍一下它们的区别 1 escape()函数 定义和用法 escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串. 语法 escape(string) 参数  描述  string  必需.要被转义或编码的字符串. 返回值 已编码的

【转】Cookie和Session的区别详解

转载地址:http://www.phperzone.cn/portal.php?aid=541&mod=view 一.cookie机制和session机制的区别 具体来说cookie机制采用的是在客户端保持状态的方案,而session机制采用的是在服务器端保持状态的方案. 同时我们也看到,由于才服务器端保持状态的方案在客户端也需要保存一个标识,所以session 机制可能需要借助于cookie机制来达到保存标识的目的,但实际上还有其他选择 二.会话cookie和持久cookie的区别 如果不设置

Bind和Eval的区别详解

原文:Bind和Eval的区别详解 1.简单描述Eval和Bind的区别 绑定表达式 <%# Eval("字段名") %> <%# Bind("字段名") %> 区别 1.eval是只读数据,bind是可更新的. 2.当对次表达式操作时候,必须用Eval 如<%# Eval("字段名").ToString().Trim() %> 2.若GridView中绑定列里面 设置 内容格式 DataFormateStri

PHP中include和require的区别详解

1.概要  require()语句的性能与include()相类似,都是包括并运行指定文件.不同之处在于:对include()语句来说,在执行文件时每次都要进行读取和评估:而对于require()来说,文件只处理一次(实际上,文件内容替换require()语句).这就意味着如果可能执行多次的代码,则使用require()效率比较高.另外一方面,如果每次执行代码时是读取不同的文件,或者有通过一组文件迭代的循环,就使用include()语句. require的使用方法如:require("myfil