1、认识
 　　$().each()遍历当前jQuery对象，并在每一个元素上执行回调函数。其方法内部是通过调用静态方法jQuery.each()来实现的。
 　　jQuery.each()是一个通用的遍历迭代的静态方法，用于无缝的遍历对象或者数组。如果是数组,回调函数每次传入数组的索引和对应的值(值亦可以通过this 关键字获取,但javascript总会包装this 值作为一个对象—尽管是一个字符串或是一个数字),方法会返回被遍历对象的第一参数。
2、语法：
    2.1、$(selector).each(function(index,element)
   描述：
function(index,element)

必需。为每个匹配元素规定运行的函数。

  • index - 选择器的 index 位置
  • element - 当前的元素（也可使用 "this" 选择器）
2.2、jQuery.each(collection,callback(indexInArray,valueofElement))
3、$().each()和$.each(）实例：
3.1、.each()
描述：输出每个 li 元素的文本：
HTML代码
<ul>

    <li>Coffee</li>

    <li>Milk</li>

    <li>Soda</li>

</ul>

JS代码：

$(document).ready(function(){

    $("li").each(function(){

      alert($(this).text())

    });

});

结果为：Coffee Milk Soda

3.2、 jQuery.each()
 3.2.1、each处理一维数组
 var arr1 = [ "aaa", "bbb", "ccc" ];

  $.each(arr1, function(i,val){

      alert(i);

      alert(val);

  });

alert(i)将输出为：，，

alert(val)将输出为：aaa，bbb，ccc

3.2.2、each处理二维数组  

var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]

$.each(arr, function(i, item){

      alert(i);

      alert(item);

});

alert(i)将输出为：，，

alert(item)将输出为： ['a', 'aa', 'aaa']，['b', 'bb', 'bbb']，['c', 'cc', 'ccc']

3.2.3、对此二位数组的处理稍作变更之后

  var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]

 　　$.each(arr, function(i, item){

      　　$.each(item,function(j,val){

       　　　　 alert(j);

        　　　　alert(val);

    　});

});

 alert(j)输出为：，，，，，，，，

 alert(val)输出为：a，aa，aaa，b，bb，bbb，c，cc，ccc
3.2.4、each处理json数据，这个each就有更厉害了，能循环每一个属性  
 var obj = { one:, two:, three:};

 $.each(obj, function(key, val) {

      alert(key);

      alert(val);

 });

alert(key)输出为：one two three

alert(val)输出为：
3.2.5、如果不想输出第一项 (使用retrun true)进入 下一遍历
var myArray=["skipThis", "dothis", "andThis"];

$.each(myArray, function(index, value) {

     if (index == ) {

     return true; // equivalent to ‘continue' with a normal for loop

}

     // else do stuff…

     alert (index + “: “+ value);

});

结果为：:dothis

结果为：:andThis
3.2.6、回调函数中 return false时可以退出$.each(), 如果返回一个非false 即会像在for循环中使用continue 一样, 会立即进入下一个遍历.
HTML代码：
<body>

   <div id=”one”></div>

   <div id=”two”></div>

   <div id=”three”></div>

   <div id=”four”></div>

   <div id=”five”></div>

</body>

JS代码：

 var arr = [ "one", "two", "three", "four", "five" ];//数组

 var obj = { one:, two:, three:, four:, five: }; // 对象

 jQuery.each(arr, function() {  // this 指定值

       $(“#” + this).text(“Mine is ” + this + “.”);  // this指向为数组的值, 如one, two

       return (this != “three”); // 如果this = three 则退出遍历

 });

 jQuery.each(obj, function(i, val) {  // i 指向键, val指定值

       $(“#” + i).append(document.createTextNode(” – ” + val));

 });

结果为：

Mine is one.

Mine is two.

Mine is three.

–

-

-

 -

 -
4、扩展
其实jQuery里的each方法是通过js里的call方法来实现的。
下面简单介绍一下call方法。
call这个方法很奇妙，其实官方的说明是：“调用一个对象的一个方法，以另一个对象替换当前对象。”网上更多的解释是变换上下文环境，也有说是改变上下文this指针。
call([thisObj[,arg1[, arg2[,   [,.argN]]]]])
参数 ：thisObj --->可选项。将被用作当前对象的对象。 
参数：arg1, arg2, , argN --->可选项。将被传递方法参数序列。 
 
说明 :
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 
如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。
function add(a,b)

{

      alert(a+b);

}

function sub(a,b)

{

     alert(a-b);

}

add.call(sub,,);
这个例子中的意思就是用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4);
 // 注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。 
 
 


 
 
 
 

区别和详解：jQuery中的 $().each()和$.each()/jQuery.each()的更多相关文章

  1. java中4种修饰符访问权限的区别及详解全过程

    java中4种修饰符访问权限的区别及详解全过程 http://jingyan.baidu.com/article/fedf0737700b3335ac8977ca.html java中4中修饰符分别为 ...

  2. Windows8 各种版本区别对比详解

    微软的 Windows8 操作系统提供了4个不同的版本,分别是 Windows RT.Windows 8 标准版.Windows 8 Pro 专业版 以及 Windows 8 Enterprise 企 ...

  3. 详解Java中的clone方法

    详解Java中的clone方法 参考:http://blog.csdn.net/zhangjg_blog/article/details/18369201/ 所谓的复制对象,首先要分配一个和源对象同样 ...

  4. 详解CorelDRAW中如何合并与拆分对象

    合并两个或多个对象可以创建带有共同填充和轮廓属性的单个对象,以便将这些对象转换为单个曲线对象.可以合并的对象包括矩形.椭圆形.多边形.星形.螺纹.图形或文本等,本教程将详解CorelDRAW中关于合并 ...

  5. 详解 javascript中offsetleft属性的用法（转）

    详解 javascript中offsetleft属性的用法 转载  2015-11-11   投稿:mrr    我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...

  6. shell学习（9）- du和df区别及详解

    清明小长假来加班,总得干点啥吧,今天就说说du 和df的区别. 1.区别 du,disk usage,是通过搜索文件来计算每个文件的大小然后累加,du能看到的文件只是一些当前存在的,没有删除的.他计算 ...

  7. 详解javascript中的this对象

    详解javascript中的this对象 前言 Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象.Javascript可以通过一定的 ...

  8. Java日志管理：Logger.getLogger()和LogFactory.getLog()的区别（详解Log4j）

    Java日志管理:Logger.getLogger()和LogFactory.getLog()的区别(详解Log4j) 博客分类: Java综合   第一.Logger.getLogger()和Log ...

  9. 详解JavaScript中的原型

    前言 原型.原型链应该是被大多数前端er说烂的词,但是应该还有很多人不能完整的解释这两个内容,当然也包括我自己. 最早一篇原型链文章写于2019年07月,那个时候也是费了老大劲才理解到了七八成,到现在 ...

  10. 《手把手教你》系列技巧篇（二十七）-java+ selenium自动化测试- quit和close的区别（详解教程）

    1.简介 尽管有的小伙伴或者童鞋们觉得很简单,不就是关闭退出浏览器,但是宏哥还是把两个方法的区别说一下,不然遇到坑后根本不会想到是这里的问题. 2.源码 本文介绍webdriver中关于浏览器退出操作 ...

随机推荐

  1. C#操作XML学习之创建XML文件的同时新建根节点和子节点(多级子节点)

    最近工作中遇到一个问题,要求创建一个XML文件,在创建的时候要初始化该XML文档,同时该文档打开后是XML形式,但是后缀名不是.在网上找了好些资料没找到,只能自己试着弄了一下,没想到成功了,把它记下来 ...

  2. 【c#搬砖记】用Docx导出word格式的docx文件

    DocX开源网址:http://docx.codeplex.com/ 1.引入DocX.dll 调用ReplaceText()方法替换模板中的字符.只支持docx格式的word文档 using (Do ...

  3. C#自定义特性实例

    元数据,就是C#中封装的一些类,无法修改.类成员的特性被称为元数据中的注释. 1.什么是特性   (1)属性与特性的区别  属性(Property):属性是面向对象思想里所说的封装在类里面的数据字段, ...

  4. Hibernate框架之双向多对多关系映射

    昨天跟大家分享了Hibernate中单向的一对多.单向多对一.双向一对多的映射关系,今天跟大家分享下在Hibernate中双向的多对多的映射关系 这次我们以项目和员工举个栗子,因为大家可以想象得到,在 ...

  5. 第三讲：WCF介绍（3）

    代码 https://yunpan.cn/cPns5DkGnRGNs   密码:3913   前面我们通过一个小的例子,大概了解的WCF. 这里我们补充下  EndPoint 配置  A,B,C  中 ...

  6. FireMonkey ListView 自动计算行高

    说明:展示 ListView 视其每一行 Item 的 Detail 字串长度自动调整高度(可每行高度不同). 适用:Delphi XE7 / XE8 源码下载:[原创]ListView_自动计算行高 ...

  7. 数据查询语言DQL 与 内置函数（聚合函数）

    数据查询语言DQL 从表中获取符合条件的数据 select select*from表的名字   查询表所有的数据.(select跟from必须一块用 成对出现的) * 表示所有字段,可以换成想要查询的 ...

  8. volcanol_Linux_ 问题汇总系列_4_Thinkpad_E40_0578MDC_在Fedora 13 Linux(FC13)中如何安装无线网卡驱动

    今天晚上,我突然想在自己到笔记本上安装linux系统,因为我自己第一次接触到的linux是红帽支持到Fedora Core 4,所以一直最中意的linux 发行版本是FC系列,同时由于FC 15以后到 ...

  9. LoadRunner上传及下载文件

    (1)LoadRunner上传文件 web_submit_data("importStudent.do", "Action=https://testserver/cons ...

  10. spring 3.x变通实现@Conditional注解的功能

    在某些情况下,我们要根据当前的系统配置决定是否初始化一个bean,也就是条件性加载,比如本地缓存或者分布式缓存,亦或是采用http实现或者socket实现.在spring 4.x中,可以使用新增的@C ...