100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > JQuery中each()的使用实例详解

JQuery中each()的使用实例详解

时间:2021-05-14 04:52:10

相关推荐

JQuery中each()的使用实例详解

web前端|js教程

JQuery,each,详解

web前端-js教程

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

看吧影院电影源码,ubuntu终端不能删除,自制爬虫手工制作,学php的心得体会2000字,椰子seo解说lzw

each(callback)

android浏览器源码下载,ubuntu设组长,手动部署服务到tomcat,爬虫异步处理,php自学多久可以找工作,延平区专业seo服务费lzw

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

思途 5.0 源码,vscode1.47.0,ubuntu怎么设置中文,tomcat如何部署,sqlite使用方法,网页设计文字图片步骤,dede 如何修改数据库权限,百m仿牌服务器,批量关闭后台插件,前端开发必学框架,厨房爬虫子,php写法,seo中国,springboot推荐,织梦 标签代码,家具公司网站模板下载,php手机网页 源码,win10如何发布网站模板,php后台登录,监听页面大小变化,教务管理系统 asp,matlab 源程序lzw

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

而后面的callback 则是回调函数,指示遍历元素的时候应该赋予的操作。先看下面的一个简单的例子:

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

HTML 代码:

jQuery 代码:

$(“img”).each(function(i){

this.src = “test” + i + “.jpg”;

});

结果:[ , ]

当然,在遍历元素的时候,jquery是允许自定义跳出的,请看示例代码:你可以使用 ‘return’ 来提前跳出 each() 循环。

HTML 代码:

代码如下:

Stop here

jQuery 代码:

代码如下:

$(“button”).click(function(){

$(“p”).each(function(index,domEle){

$(domEle).css(“backgroundColor”,”wheat”);

if($(this).is(“#stop”)){

$(“span”).text(“在p块为#”+index+”的地方停止。”);

return false;

}

});

或者这么写:

代码如下:

$(“button”).click(function(){

$(“p”).each(function(index){

$(this).css(“backgroundColor”,”wheat”);

if($(this).is(“#stop”)){

$(“span”).text(“在p块为#”+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’)。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。