JQuery中each()的使用方法说明
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')。
转载于:https://www.cnblogs.com/good10001/p/4760411.html
JQuery中each()的使用方法说明相关推荐
- 网页加载的不同的方式、点击按钮显示一句话、jQuery中获取元素的方法
网页加载的不同的方式 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
- 深入解析JQuery中的isPlainObject()使用方法
本篇文章给大家详细分析了jQuery中的isPlainObject()使用方法,非常不错,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 说明 j ...
- jquery ajax实例get,jQuery中ajax的get()方法用法实例
本文实例讲述了jQuery中ajax的get()方法用法.分享给大家供大家参考.具体分析如下: $.get()通过 HTTP GET请求从服务器上请求数据. 语法结构: $.get(url, [dat ...
- jQuery学习(十二)—jQuery中对象的查找方法总结
jQuery学习(十二)-jQuery中对象的查找方法总结 一.find方法 作用:在元素1中查找元素2,类似于选择器中的后代选择器 格式:元素1.find(元素2),元素2为CSS选择器或者jQue ...
- html5 toggle,jQuery中如何实现toggle方法
这次给大家带来jquery中如何实现toggle方法,使用jQuery中的toggle方法注意事项有哪些,下面就是实战案例,一起来看一下. 我们知道使用 jQuery 来实现上下移入移除,可以直接使用 ...
- Jquery中find与each方法使用详解
本文实例讲述了jQuery中find与each方法用法.分享给大家供大家参考.具体如下: 一.find()方法 jquery选择器非常强大,利用css的命名规约,可以更快更方便的找出想要的元素. 图解 ...
- jQuery中常用的函数方法总结
jQuery中为我们提供了很多有用的方法和属性,自己总结的一些常用的函数,方法.个人认为在www.21kaiyun.com的紫微斗数星座在线排盘开发中会比较常用的,仅供大家学习和参考. 事件处理 re ...
- Jquery中替换节点的方法replaceWith()和replaceAll()
本文转自:http://www.cnblogs.com/shuang121/archive/2011/12/27/2303748.html 在jquery中,我们可以通过replaceWith()和r ...
- jQuery中的使用end()方法
转自:微点阅读 https://www.weidianyuedu.com 定义和用法 end() 方法结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态. 以上是官方说法,比较难理解. ...
- jQuery中attr()和prop()方法的介绍
1.jQuery中用attr()方法来获取和设置元素属性.attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr(),attr()有4个表达式. attr(属性名) ...
最新文章
- Notes客户端重新配置批处理
- 应对不良网络文化的技术之一——网络信息抽取技术
- 数据科学的发展_数据科学的发展与发展
- [前台]---关于input标签的value值
- Linux下netstat常用,Linux netstat常用命令
- IE10兼容性故障的解决办法
- 虽然自己不是唱歌的材料
- QuickWAP实现网页跳转
- IMPORT MULTIPLE JS
- Facebook股价周四大涨15.5% 市值超亚马逊
- 微信小程序实现使用百度云 人脸录入人脸识别功能
- Python 正则表达式匹配中文
- 用python做系统的感悟_《Python机器学习经典实例》学习感悟
- 两边双虚线是什么意思_高速公路上有些路段画有双虚线是什么意思
- 开源推荐 | CoDo开源一站式DevOps平台
- UOJ Easy Round #8 T1 打雪仗 题解
- 小武学fpgastep7
- JS面试须知--数组
- 计算机行业英语期中考试,《计算机专业英语》期末考试试卷
- mysql strip_strip 命令的用法
热门文章
- 解决远程连接mysql很慢的问题(mysql_connect 打开连接慢)
- insert式注射攻击解析
- 为Web应用建立基于JMX的管理系统
- 在python中查看关键字需要在python解释器中执行_现有代码 d={},在Python3解释器中执行 d[([1,2])] = 'b'得到的结果为( )。...
- POJ1364基本的查分约束问题
- 【C 语言】数组 ( 指针退化验证 | 计算数组大小 | #define LENGTH(array) (sizeof(array) / sizeof(*array)) )
- 【Android Protobuf 序列化】Protobuf 使用 ( Protobuf 序列化 | Protobuf 反序列化 )
- 【Flutter】打开第三方 Flutter 项目
- WebUploader 上传图片回显
- python -yield理解