引子:

最近遇到一个问题,就是在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. DocumentType类型

    并不常用 nodeType 10 nodeName doctype的名称 NodeValue 值为null parentNode Document 不支持子节点 DocumentType不能动态创建, ...

  2. 构造函数的prototype和constructor属性

    Car.prototype = { name:'BMW', height:1400, long:4900 } function Car(color,owner){ this.color = color ...

  3. 学以致用十六-----Centos7.2编译安装mysql5.6.22

    一.系统环境 二.卸载系统自带的mariadb rpm -qa | grep db rpm -e --nodeps mariadb-libs-5.5.60 rpm -e --nodeps mariad ...

  4. js基础学习笔记(零七)

    indexOf() 方法 返回某个指定的字符串值在字符串中首次出现的位置. 语法: stringObject.indexOf(substring, startpos) 参数说明: 注意:如果要检索的字 ...

  5. hibernate增删改

    public class HibernateUtils { private static SessionFactory sessionFactory=null; static{ //获取config ...

  6. 正确的类引用却显示* cannot be resolved

    eclipse 出现的问题:在一个类中引入自己编写的类竟然说“cannot be resolved”,这非常明显不正常的! 解决办法:很简单,project->clean.我的问题就解决了. 至 ...

  7. 20155326 2017-2018-1 《信息安全系统设计基础》第2周学习及课堂总结myod

    20155326 2017-2018-1 <信息安全系统设计基础>第1次学习及课堂总结myod 虚拟机之前出了一些问题,然后我重新弄了一个新的虚拟机. 先在虚拟机里面安装了git. 安完以 ...

  8. spring的bean在什么时候被实例化

    Spring什么时候实例化bean,首先要分2种情况   第一:如果你使用BeanFactory作为Spring Bean的工厂类,则所有的bean都是在第一次使用该Bean的时候实例化   第二:如 ...

  9. bootstrap3相关文档

    ,每列分配多列 <divclass="container"> <div class="row"> <div class=" ...

  10. zoj2607

    题意:如左图,给定A,B,C,D的面积分别为大于等于a,b,c,d,求最小的面积 思路:因为a,b肯定有一个是满的(不然还可压缩到更小),同理,ac,bd,cd都只有一个是满的,所以有可能是对角满的, ...