【从0到1学jQuery】jQuery中each()和$.each()的使用
引子:
最近遇到一个问题,就是在each()函数中怎么模拟for循环中的break和continue的操作。所以就查看了jQuery关于这个函数的文档,并且总结一下。
演示代码如下:
<div>
<ul>
<li>你是第1个</li>
<li>你是第2个</li>
<li>你是第3个</li>
<li>你是第4个</li>
<li>你是第5个</li>
</ul>
</div>
需要的结果就是遍历整个li标签元素,当循环到“你是第2个”的时候continue执行到“你是第4个”标签的时候break;
1.$(selector).each()函数的使用
函数定义:
.each( function(index, Element) )
function(index, Element)
类型: Function()
为每个匹配元素执行的一个函数。
$(function() {
$('li').each(function(index) {
var innerText = $(this).text();
if (innerText == '你是第2个') {
//跳过本次循环,相当于continue
return;
} else if (innerText == '你是第4个') {
//退出循环,相当于break;
return false;
}
console.log(innerText);
});
})
执行结果:
在函数体内部我们使用$(this)获取的是当前遍历到元素的jQuery对象,同样我们可以通过使用this获取普通的js对象。
看下面我们将断点打到函数的入口处,观察$(this)和this的输出:
2.$.each()函数的使用
$.each() 一个通用的迭代函数,它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性(如一个函数的参数对象)来迭代数字索引,从0到length - 1。其他对象通过其属性名进行迭代。
函数定义:
jQuery.each(array, callback )或者jQuery.each(object, callback )
array
类型: Array
遍历的数组。
object
类型: Object
遍历的对象。
callback
类型: Function( Integer indexInArray, Object value )
该函数会在每个对象上(迭代)调用。
执行代码:
$(function() {
$.each($('li'), function(index, elem) {
// console.log(index);
// console.log(elem);
var innerText =elem.innerText;
if (innerText == '你是第3个') {
return;
} else if (innerText == '你是第5个') {
return false;
}
console.log(innerText);
})
})
结果:
深入研究:
由上面的代码回调函数function(index, elem) 我们知道,其中的当遍历的是数组的时候index和elem分别是索引和索引值。
那么当我们遍历的是一个对象的时候呢?
看示例:
var testObject={
name:'zhiqiang',
age:'23',
home:'haidian'
}
$(function(){
$.each(testObject,function(keyObj,valueObj){
console.log(keyObj,valueObj);
})
})
可以看到输出的结果是:
这里我们可以知道当$.each()函数去遍历一个对象的时候,这个时候回调函数的argument[0],argument[1]分别是对象的key和value。
【从0到1学jQuery】jQuery中each()和$.each()的使用的更多相关文章
- 跟我一起学写jQuery插件开发方法(转载)
jQuery如此流行,各式各样的jQuery插件也是满天飞.你有没有想过把自己的一些常用的JS功能也写成jQuery插件呢?如果你的答案是肯定的,那么来吧!和我一起学写jQuery插件吧! 很 ...
- 学写jQuery插件开发方法
jQuery如此流行,各式各样的jQuery插件也是满天飞.你有没有想过把自己的一些常用的JS功能也写成jQuery插件呢?如果你的答案是肯定的,那么来吧!和我一起学写jQuery插件吧! 很多公 ...
- jQuery插件中的this指的是什么
在jQuery插件的范围里, this关键字代表了这个插件将要执行的jQuery对象, 但是在其他包含callback的jQuery函数中,this关键字代表了原生的DOM元素.这常常会导致开发者误将 ...
- JQuery mobile中按钮自定义属性的改变
1..ui-mobile-viewport是jquery mobile默认给body加的class,这样的话包含选择符优先级高一点 <style> .ui-mobile-viewport ...
- prototype.js 和 jQuery.js中 ajax 的使用
这次还是prototype.js 和 jQuery.js冲突的问题,前面说到过解决办法http://www.cnblogs.com/Joanna-Yan/p/4836252.html,以及上网说的大部 ...
- JQuery EasyUI中datagrid的使用
在学习过程中,可以参照JQuery EasyUI的官方网站学习.地址:http://www.jeasyui.com/demo/main/index.php 在学习JQuery EasyUI中的Data ...
- jQuery ZeroClipboard中Flash定位不准确的解决方案
转自波斯马,原文地址<jQuery ZeroClipboard中Flash定位不准确的解决方案> jQuery ZeroClipboard支持在多种浏览器中复制内容到剪贴板,IE.Fire ...
- Jquery EasyUI中treegrid
Jquery EasyUI中treegrid的中右键菜单和一般按钮同时绑定事件时的怪异事件 InChatter系统开源聊天模块前奏曲 最近在研究WCF,又因为工作中的项目需要,要为现有的系统增加一 ...
- jQuery Mobile (中)
jQuery Mobile (中) 前言 昨天我们一起学习了一部分jquery mobile的知识,今天我们继续. 这些是些很基础的东西,有朋友觉得这个没有其它的好,但是学习下不吃亏嘛,我反正也不会一 ...
- jquery ajax 中各个事件执行顺序
jquery ajax 中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事 ...
随机推荐
- AngularJS实现文件异步上传
实现:前端AngularJs+后端servelt 依赖包:commons-fileupload.x.x.jar commons-io-x.x.jar 下载: http://commons.apache ...
- java web 大文件下载
泽优大文件下载产品测试 泽优大文件下载控件down2,基于php开发环境测试. 开发环境:HBuilder 服务器:wamp64 数据库:mysql 可视化数据库编辑工具:Navicat Premiu ...
- 使用 WLST 和节点管理器来管理服务器
使用节点管理器启动计算机上的服务器 WLST 可以连接至在任何计算机上运行的节点管理器,并能够在此计算机上启动一个或多个 WebLogic Server 实例.要通过此技术使用 WLST 和节点管理器 ...
- 【python】鼠标操作
[python]鼠标操作 推荐地址:http://www.cnblogs.com/fnng/p/3288444.html --------------------------------------- ...
- Android 获取高度宽度为0的时候的处理
转自http://my.oschina.net/xiahuawuyu/blog/167949 我们都知道在onCreate()里面获取控件的高度是0,这是为什么呢?我们来看一下示例: 首先我们自己写一 ...
- mysql 唯一索引UNIQUE使用方法详解
创建唯一索引的目的不是为了提高访问速度,而只是为了避免数据出现重复.唯一索引可以有多个但索引列的值必须唯一,索引列的值允许有空值.如果能确定某个数据列将只包含彼此各不相同的值,在为这个数据列创建索引的 ...
- 分形之花篮(Flower Basket)
这一篇展示的图形与上一篇文章分形之皇冠(Crown)很相似. 核心代码: static void FractalFlowerBasket(const Vector3& vStart, cons ...
- 个人作业四--Alpha阶段个人总结
一.个人总结 在alpha 结束之后, 每位同学写一篇个人博客, 总结自己的alpha 过程: 请用自我评价表:http://www.cnblogs.com/xinz/p/3852177.html 有 ...
- 利用CPaintDC::IntersectClipRect将绘图限制在局部区域
问题背景:画带坐标的图,例如 画里面那条曲线的时候,希望将绘图区域局限在坐标范围内,范围外的就自动屏蔽掉. 两个方案,一是用CPaintDC的SelectClipRgn函数,感觉略麻烦.另一个函数,就 ...
- 数据库操作类《SqlHelper》
一.背景 在看了一本书叫<Visual Studio 2010(C#)Windows数据库项目开发>后,觉得很多编程技术需要积累,因为一个简单的项目里包含的技术太多了,容易忘记.每次需要用 ...