`
砺雪凝霜
  • 浏览: 152171 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

$.each 和$(selector).each()的区别以及用法

阅读更多

文章来源:http://blog.csdn.net/on_my_way20xx/article/details/7791769%20
Home » jQuery » $.each()
$.each()
Posted on 2012 年 3 月 15 日 in jQuery, jQuery函数
|
by Jason
|
译自官方手册:jQuery.each()
对数组或对对象内容进行循环处理
jQuery.each( collection, callback(indexInArray, valueOfElement) )
collection   遍历的对象或数组

callback(indexInArray, valueOfElement) 在每一个对象上调用的函数

说明

一个通用的遍历函数 , 可以用来遍历对象和数组. 数组和含有一个length属性的伪数组对象 (伪数组对象如function的arguments对象)以数字索引进行遍历,从0到length-1, 其它的对象通过的属性进行遍历.

$.each()与$(selector).each()不同, 后者专用于jquery对象的遍历, 前者可用于遍历任何的集合(无论是数组或对象),如果是数组,回调函数每次传入数组的索引和对应的值(值亦可以通过this 关键字获取,但javascript总会包装this 值作为一个对象—尽管是一个字符串或是一个数字),方法会返回被遍历对象的第一参数

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

//例子:———传入数组

<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>

$.each([52, 97], function(index, value) {
alert(index + ‘: ‘ + value);
});

</script>
</body>
</html>

//输出

0: 52
1: 97

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

//例子:———如果一个映射作为集合使用,回调函数每次传入一个键-值对

<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>

var map = {
‘flammable’: ‘inflammable’,
‘duh’: ‘no duh’
};
$.each(map, function(key, value) {
alert(key + ‘: ‘ + value);
});

</script>
</body>
</html>

//输出

flammable: inflammable
duh: no duh

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

//例子:———回调函数中 return false时可以退出$.each(), 如果返回一个非false 即会像在for循环中使用continue 一样, 会立即进入下一个遍历

<!DOCTYPE html>

<html>

<head>

  <style>

  div { color:blue; }

  div#five { color:red; }

  </style>

  <script src=”http://code.jquery.com/jquery-latest.js”></script>

</head>

<body>

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

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

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

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

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

<script>

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

    var obj = { one:1, two:2, three:3, four:4, five:5 }; // 对象

    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));

    });

</script>

</body>

</html>

// 输出

Mine is one. – 1
Mine is two. – 2
Mine is three. – 3
- 4
- 5
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//例子:———遍历数组的项, 传入index和value

<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
$.each( ['a','b','c'], function(i, l){
alert( “Index #” + i + “: ” + l );
});

</script>
</body>
</html>

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

//例子:———遍历对象的属性,传入 key和value

<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>

$.each( { name: “John”, lang: “JS” }, function(k, v){
alert( “Key: ” + k + “, Value: ” + v );
});

</script>
</body>
</html>

正自评论的例子:

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

1. 如果不想输出第一项 (使用retrun true)进入 下一遍历

<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>

var myArray=["skipThis", "dothis", "andThis"];
$.each(myArray, function(index, value) {
if (index == 0) {
return true; // equivalent to ‘continue’ with a normal for loop
}
// else do stuff…
alert (index + “: “+ value);
});

</script>
</body>
</html>

 

分享到:
评论

相关推荐

    jquery中$each()方法的使用指南

    $.each()与$(selector).each()不同, 后者专用于jquery对象的遍历, 前者可用于遍历任何的集合(无论是数组或对象),如果是数组,回调函数每次传入数组的索引和对应的值(值亦可以通过this 关键字获取,但javascript总会...

    Web前端开发技术-Jquery元素操作作.pptx

    $.each()方法:基本语法$.each(Object, function(index,?element)?{});;案例分析: 将所有选中的商品的购买数量文本框中的值相加,得到总件数。 将所有选中的商品的小计值相加,得到总额。 当用户更改了复选框的状态...

    jQuery中each方法的使用详解

    概述:  each() 方法规定为每个匹配元素规定运行的函数。  返回 false 可用于及早停止循环,相当于break。  返回 true 可以结束本次循环,相当于... $.each(array,function(Key,Value){ }) 1.遍历js数组 $(functi

    jquery-1.1.3 效率提高800%

    要查看高级抽象,见$.set、$.post等,这些方法更易于理解和使用。但是功能上有限制(例如,没有错误处理函数)。 警告:如果数据类型指定为"script",那么POST自动转化为GET方法。(因为script会作为一个嵌入页面的...

    dime:Uber-micro库(&lt;1kb),用于选择元素和处理自定义事件。 没有依赖关系。 IE9 +

    方法 元素= $('selector') 元素= $('selector')[0] 元素|元素.on() 元素|元素.trigger() 元素.each() 元素.find() 用法 // Select multiple elements (querySelectorAll). $ ( '.selector' ) // Iterate over ...

    jQuery中each()方法用法实例

    本文实例讲述了jQuery中each()方法用法。分享给大家供大家参考。具体分析如下: 此方法可以以匹配元素集合中每一个元素作为上下文去执行一个函数。 当每次执行函数时,函数的执行环境都是一个匹配元素集合中不同的...

    jquery插件使用方法大全

    使用jquery实现ajax同样异常简单 代码 (1) $.get("search. do",{id:1},rend); function rend(xml){ alert&#40;xml&#41;; } (2) $.post("search. do",{id:1},rend); function rend(xml){ alert&#40;xml&#41;; } (3) $...

    前端HTML模板解析引擎domTemplate.js.zip

    $.domTemplate.registerTag('tagName',function(ctx,name,exp){ }); //tagName 是自定义标签名称,用时要加上前缀,如定义'test'标签,用时h-test="" 标签:domTemplate 分享 ...

    jquery-sequence:在jQuery集合的每个元素上运行一个回调,并在两者之间设置一个计时器

    jQuery序列 在jQuery集合的每个元素上运行一个回调,并在两者之间设置一个计时器 像这样使用它: $ ( ".selector" ) . sequence ( callback , 500 ) ; 这会将callback函数应用于... 它包含一个$.Deferred()承诺作为ct

    jQuery详细教程

    jQuery 使用名为 noConflict() 的方法来解决该问题。 var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。 亲自试一试 结论 由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循...

    Jquery学习手册

    jquery学习笔记,很全面的介绍jquery的用法。 存在的html片段)包装成jQuery对象。 $()方法里面支持的语法又包括3大类,分别是表达式(包括类表达式.,id表达式#,元素表达式等)、符号(包括后代符号space,next符号+...

    kali:一个简单的querySelector包装器

    这是一个简单的document.querySelector和document.querySelectorAll包装器,使用$符号作为快捷方式,因此,如果您在某个时刻加载了jQuery,则会覆盖jQuery。 目前,在我仅将Chrome定位到我的项目中使用了它,例如...

    jQuery完全实例.rar

    你可以使用 'return' 来提前跳出 each() 循环。 HTML 代码: &lt;button&gt;Change colors &lt;span&gt;&lt;/span&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;div id="stop"&gt;Stop here&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/...

    jasmine-integration

    在浏览器中使用此工具的好处: 能够独立运行测试。 设置断点。 能够查看加载的页面的实际内容。 比phantomjs更快的性能。 用法 首先,您需要访问一个 url 并可能等到页面加载完毕: beforeEach(function(done...

    foreach-prop:对象的类似数组的方法

    使用keyOf , lastKeyOf , findKey和find方法时,请记住这一点。安装npm i foreach-propCDNjsDelivr &lt; script src =" https://cdn.jsdelivr.net/npm/foreach-prop@latest/dist/each-prop.umd.js " &gt; &lt;/ ...

    eq:jq,但对于EDN

    用法 $ eq [selector []] 如果没有给出路径,则eq从stdin读取。 默认选择器为. (就像jq一样)。 例子 # pretty-print each line cat * .edn | eq . # pretty-print the :foo-bar value of each line cat * .edn | ...

    jquery-suggestable:实现搜索的简单jQuery插件建议使用本地缓存

    实现搜索的简单jQuery插件建议使用本地缓存。 用法 $('selector').suggestable({ 'data-url' : 'object\'s data-property which contains url to suggests', 'container-class' : 'css class name for drop-down ...

    jquery对象访问是什么及使用方法介绍

    each(callback) size() length selector context get() get(index) index([subject]) 测试用例 以下是通过代码的方式测试上述jQuery对象访问,供不明白的朋友们参考: &lt;!DOCTYPE html&gt; &lt;html&gt;...

Global site tag (gtag.js) - Google Analytics