JQuery中each()的使用方法说明

each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象、数组的属性值并进行处理。jQuery和jQuery对象都实 现了该方法,对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话 说:jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用。而jQuery对象提供的each方法则是对jQuery内 部的子元素进行逐个调用。

each函数根据参数的类型实现的效果不完全一致:

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

代码如下:

$.each(Object, function(p1, p2) {
     this;       //这里的this指向每次遍历中Object的当前属性值
     p1; p2;     //访问附加参数
}, ['参数1', '参数2']);

2、遍历数组(有附件参数)

代码如下:

$.each(Array, function(p1, p2){
     this;       //这里的this指向每次遍历中Array的当前元素
     p1; p2;     //访问附加参数
}, ['参数1', '参数2']);

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

代码如下:

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

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

代码如下:

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

下面提一下jQuery的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 4 7  

var obj = { one:1, two:2, three:3, four:4};
$.each(obj, function(key, val) {
 alert(obj[key]);
});
//这个each就有更厉害了,能循环每一个属性
//输出结果为:1 2 3 4

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

each(callback)

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

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

而后面的callback 则是回调函数,指示遍历元素的时候应该赋予的操作。先看下面的一个简单的例子:
迭代两个图像,并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。

HTML 代码:

代码如下:

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

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

代码如下:

<button>Change colors</button>
<span></span>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="stop">Stop here</div>
<div></div>
<div></div>
<div></div>

jQuery 代码:

代码如下:

$("button").click(function(){
$("div").each(function(index,domEle){
$(domEle).css("backgroundColor","wheat");
if($(this).is("#stop")){
$("span").text("在div块为#"+index+"的地方停止。");
return false;
}
});

或者这么写:

代码如下:

$("button").click(function(){
$("div").each(function(index){
$(this).css("backgroundColor","wheat");
if($(this).is("#stop")){
$("span").text("在div块为#"+index+"的地方停止。");
return false;
}
});

图解:

each() 方法规定为每个匹配元素规定运行的函数。

提示:返回 false 可用于及早停止循环。
语法
$(selector).each(function(index,element))参数 描述
function(index,element) 必需。为每个匹配元素规定运行的函数。
•index - 选择器的 index 位置
•element - 当前的元素(也可使用 "this" 选择器

实例
输出每个 li 元素的文本:

代码如下:

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

实例
obj 对象不是数组
该方法同1的最大区别是:fn方法会被逐次不考虑返回值的进行进行。换句话说,obj对象的所有属性都会被fn方法进行调用,即使fn函数返回false。调用传入的参数同1类似。

代码如下:

jQuery.each=function( obj, fn, args ) {
if ( args ) {
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方法中fn的具体调用方法并不是采用简单的fn(i,val)或fn(args),而是采用了fn.call(val,i,val)或fn.apply(obj.args)的形式,这意味着,在你自己的fn的实现中,可以直接采用this指针引用数组或是对象的子元素。

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

代码如下:

返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。
返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。

(0)

相关推荐

  • 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你. Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色: ✓  16个独特的过渡效果

  • jquery中获取id值方法小结

    复制代码 代码如下: <div id="product_shift_out_{m}"> </div><script language = "JavaScript" type="text/javascript">$(document).ready(function(){name = $('div').eq(0).attr('id');alert(name)});</script> eq(0)是取第一个

  • jQuery.Autocomplete实现自动完成功能(详解)

    1.jquery.autocomplete参考地址 http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ http://docs.jquery.com/Plugins/Autocomplete 2.jquery.autocomplete详解 语法: autocomplete(urlor data, [options] ) 参数: url or data:数组或者url [options]:可选项,选项解释如下: 1) m

  • jquery ajax提交表单数据的两种方式

    之前实现AJAX使用Javascript脚本一个一个敲出来的,很繁琐.学习Jquery之后就感觉实现AJAX并不是那么的困难了,当然除了Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery.Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后台可以获取到Form表单的值).在所要提交的表单中,如果元素很多的话建议用第二种方式进行提交,当然你要是想练练"打字水平"的话用第一种方式提交也未尝不可,相信开发者都不想费白劲吧!

  • 手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效

    HTML5 Canvas的幸运大奖盘特效 现在好的微信微商或者微信公众号都有这种大转盘的项目,这里就整理一个,可以参考下. 这是一款基于jquery和HTML5 Canvas的幸运大奖盘特效.该幸运大奖品特效支持移动端,它通过动态构造Canvas元素来生成大奖盘,并通过jquery代码来随机获取奖品. 使用方法 HTML结构 抽奖用的大转盘使用图片来制作,开始时它们被隐藏.整个抽奖大奖盘放置在一个容器中,控制容器的大小即可以控制奖盘的大小. XML/HTML代码 <div class="c

  • JQuery触发radio或checkbox的change事件

    早上要做一功能,checkbox被选中时,显示隐藏的层,取消选中时,再隐藏选中的层. 初始代码如下: 复制代码 代码如下: $(function(){ $("#ischange").change(function() { alert("checked"); }); }); 捣腾了半天,竟然一点反应都没有.百度了下,有高人指出上面几行代码在Firefox等浏览器中可以正常运行,即你选中复选框或取消复选框都会弹出一个对话框,但是在IE中却不会正常执行,即选中或取消复选框

  • jquery 如何动态添加、删除class样式方法介绍

    取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class,JQuery代码如下: 复制代码 代码如下: var p_class = $("p").attr("class"); //获取p元素的class [html] 使用attr()方法来设置p元素的class,JQuery代码如下: [code] 1 $("p").attr("'class", "

  • Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    详细解读Jquery各Ajax函数: $.get(),$.post(),$.ajax(),$.getJSON() 一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表,callback为请求成功后的回调函数,该函数接受两个参数,第一个为服务器返回的数据,第二个参数为服务器的状态,是可选参数. 而其中,服务器返回数据的格式其实是字符串形势,并不是我们想要的json数据格式,在此引用只是为了对比说明 复制代码 代码如下: $.get("dat

  • jQuery EasyUI API 中文文档 - DataGrid数据表格

    扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults . 依赖 panel resizable linkbutton pagination 用法 复制代码 代码如下: <table id="tt"></table> 复制代码 代码如下: $('#tt').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'

  • jQuery EasyUI API 中文文档 - ComboBox组合框

    扩展自 $.fn.combo.defaults. 用 $.fn.combobox.defaults 重写了 defaults. 依赖 combo 用法 <select id="cc" name="dept" style="width:200px;"> <option value="aa">aitem1</option> <option>bitem2</option>

随机推荐