引子:

最近遇到一个问题,就是在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) 我们知道,其中的当遍历的是数组的时候indexelem分别是索引和索引值。

那么当我们遍历的是一个对象的时候呢?

看示例:

var testObject={
name:'zhiqiang',
age:'23',
home:'haidian'
} $(function(){
$.each(testObject,function(keyObj,valueObj){
console.log(keyObj,valueObj);
})
})

可以看到输出的结果是:

这里我们可以知道当$.each()函数去遍历一个对象的时候,这个时候回调函数的argument[0],argument[1]分别是对象的keyvalue

【从0到1学jQuery】jQuery中each()和$.each()的使用的更多相关文章

  1. 跟我一起学写jQuery插件开发方法(转载)

    jQuery如此流行,各式各样的jQuery插件也是满天飞.你有没有想过把自己的一些常用的JS功能也写成jQuery插件呢?如果你的答案是肯定的,那么来吧!和我一起学写jQuery插件吧!     很 ...

  2. 学写jQuery插件开发方法

    jQuery如此流行,各式各样的jQuery插件也是满天飞.你有没有想过把自己的一些常用的JS功能也写成jQuery插件呢?如果你的答案是肯定的,那么来吧!和我一起学写jQuery插件吧!   很多公 ...

  3. jQuery插件中的this指的是什么

    在jQuery插件的范围里, this关键字代表了这个插件将要执行的jQuery对象, 但是在其他包含callback的jQuery函数中,this关键字代表了原生的DOM元素.这常常会导致开发者误将 ...

  4. JQuery mobile中按钮自定义属性的改变

    1..ui-mobile-viewport是jquery mobile默认给body加的class,这样的话包含选择符优先级高一点 <style> .ui-mobile-viewport ...

  5. prototype.js 和 jQuery.js中 ajax 的使用

    这次还是prototype.js 和 jQuery.js冲突的问题,前面说到过解决办法http://www.cnblogs.com/Joanna-Yan/p/4836252.html,以及上网说的大部 ...

  6. JQuery EasyUI中datagrid的使用

    在学习过程中,可以参照JQuery EasyUI的官方网站学习.地址:http://www.jeasyui.com/demo/main/index.php 在学习JQuery EasyUI中的Data ...

  7. jQuery ZeroClipboard中Flash定位不准确的解决方案

    转自波斯马,原文地址<jQuery ZeroClipboard中Flash定位不准确的解决方案> jQuery ZeroClipboard支持在多种浏览器中复制内容到剪贴板,IE.Fire ...

  8. Jquery EasyUI中treegrid

    Jquery EasyUI中treegrid的中右键菜单和一般按钮同时绑定事件时的怪异事件 InChatter系统开源聊天模块前奏曲   最近在研究WCF,又因为工作中的项目需要,要为现有的系统增加一 ...

  9. jQuery Mobile (中)

    jQuery Mobile (中) 前言 昨天我们一起学习了一部分jquery mobile的知识,今天我们继续. 这些是些很基础的东西,有朋友觉得这个没有其它的好,但是学习下不吃亏嘛,我反正也不会一 ...

  10. jquery ajax 中各个事件执行顺序

    jquery ajax 中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事 ...

随机推荐

  1. AngularJS实现文件异步上传

    实现:前端AngularJs+后端servelt 依赖包:commons-fileupload.x.x.jar commons-io-x.x.jar 下载: http://commons.apache ...

  2. java web 大文件下载

    泽优大文件下载产品测试 泽优大文件下载控件down2,基于php开发环境测试. 开发环境:HBuilder 服务器:wamp64 数据库:mysql 可视化数据库编辑工具:Navicat Premiu ...

  3. 使用 WLST 和节点管理器来管理服务器

    使用节点管理器启动计算机上的服务器 WLST 可以连接至在任何计算机上运行的节点管理器,并能够在此计算机上启动一个或多个 WebLogic Server 实例.要通过此技术使用 WLST 和节点管理器 ...

  4. 【python】鼠标操作

    [python]鼠标操作 推荐地址:http://www.cnblogs.com/fnng/p/3288444.html --------------------------------------- ...

  5. Android 获取高度宽度为0的时候的处理

    转自http://my.oschina.net/xiahuawuyu/blog/167949 我们都知道在onCreate()里面获取控件的高度是0,这是为什么呢?我们来看一下示例: 首先我们自己写一 ...

  6. mysql 唯一索引UNIQUE使用方法详解

    创建唯一索引的目的不是为了提高访问速度,而只是为了避免数据出现重复.唯一索引可以有多个但索引列的值必须唯一,索引列的值允许有空值.如果能确定某个数据列将只包含彼此各不相同的值,在为这个数据列创建索引的 ...

  7. 分形之花篮(Flower Basket)

    这一篇展示的图形与上一篇文章分形之皇冠(Crown)很相似. 核心代码: static void FractalFlowerBasket(const Vector3& vStart, cons ...

  8. 个人作业四--Alpha阶段个人总结

    一.个人总结 在alpha 结束之后, 每位同学写一篇个人博客, 总结自己的alpha 过程: 请用自我评价表:http://www.cnblogs.com/xinz/p/3852177.html 有 ...

  9. 利用CPaintDC::IntersectClipRect将绘图限制在局部区域

    问题背景:画带坐标的图,例如 画里面那条曲线的时候,希望将绘图区域局限在坐标范围内,范围外的就自动屏蔽掉. 两个方案,一是用CPaintDC的SelectClipRgn函数,感觉略麻烦.另一个函数,就 ...

  10. 数据库操作类《SqlHelper》

    一.背景 在看了一本书叫<Visual Studio 2010(C#)Windows数据库项目开发>后,觉得很多编程技术需要积累,因为一个简单的项目里包含的技术太多了,容易忘记.每次需要用 ...