`
newleague
  • 浏览: 1500925 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类

JQuery中each()的使用方法说明

阅读更多

JQuery中的each函数在1.3.2的官方文档中的描述如下,each是jquery下比较实用的遍历函数。
-
-
JQuery中的each函数在1.3.2的官方文档中的描述如下:
each(callback)
以每一个匹配的元素作为上下文来执行一个函数。
意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整形)。返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。
而后面的callback 则是回调函数,指示遍历元素的时候应该赋予的操作。先看下面的一个简单的例子:
迭代两个图像,并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。
HTML 代码:
复制代码 代码如下:
<img/><img/>jQuery 代码:
$("img").each(function(i){
this.src = "test" + i + ".jpg";
});

结果:[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]
当然,在遍历元素的时候,jquery是允许自定义跳出的,请看示例代码:你可以使用 'return' 来提前跳出 each() 循环。
HTML 代码:
复制代码 代码如下:
<button>Change colors</button>
<span></span>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="stop">Stop here</div>
<div></div>
<div></div>
<div></div>

jQuery 代码:
复制代码 代码如下:
$("button").click(function(){
$("div").each(function(index,domEle){
$(domEle).css("backgroundColor","wheat");
if($(this).is("#stop")){
$("span").text("在div块为#"+index+"的地方停止。");
return false;
}
});

或者这么写:
复制代码 代码如下:
$("button").click(function(){
$("div").each(function(index){
$(this).css("backgroundColor","wheat");
if($(this).is("#stop")){
$("span").text("在div块为#"+index+"的地方停止。");
return false;
}
});

图解:
 详细出处参考:http://www.jb51.net/article/24581.htm

分享到:
评论

相关推荐

    jQuery中each遍历的三种方法实例分析

    在这种方法中,首先通过 jQuery 选择器获取一个对象集合,然后使用 jQuery 的 $.each() 方法来遍历这个集合。$.each() 方法是 jQuery 提供的一个通用的遍历函数,它同样接受一个回调函数作为参数,回调函数中的两个...

    jquery中each方法示例和常用选择器

    在jQuery库中,`each`方法是一个非常核心且实用的功能,它允许开发者遍历集合中的每一个元素,并执行指定的函数。这个方法对于处理DOM元素集合,如HTML中的多个元素,非常有用。以下是对`each`方法的详细说明: ###...

    jQuery中each循环的跳出和结束实例

    然而,在jQuery中,由于其each()方法的特性,我们无法直接使用break和continue来控制循环。 jQuery的each()方法类似于JavaScript中的for循环,它允许你遍历一个jQuery对象或数组。在each()函数中,我们可以提供一个...

    jquery的说明文档

    - **遍历与过滤**:`each()` 遍历集合中的每个元素,`first()`, `last()`, `eq()`, `not()`, `filter()`, `find()` 过滤元素。 - **尺寸与位置**:`width()`, `height()`, `innerWidth()`, `innerHeight()`, `...

    JQuery跳出each循环的方法

    下面给出几个具体的代码示例来说明如何在JQuery的each()方法中使用return false;来跳出循环。 1. 跳出所有循环: ```javascript $(function() { $("input[type='text']").each(function(i) { var _val = $(this)....

    jQuery中文API文檔

    避免在循环中使用jQuery选择器,可提前将元素保存为jQuery对象。 通过深入学习和理解这些jQuery中文API文档中的知识点,开发者可以更高效地编写出高性能的前端代码,提升网页的用户体验。同时,熟练掌握jQuery也有...

    详解jQuery-each()方法

    然后在JavaScript中,我们使用jQuery-each()方法遍历这些li元素,并为每个元素设置不同的透明度值。透明度的计算方法是将索引值加1后除以10,这样第一个li的透明度就是0.1,第二个是0.2,以此类推。 通过这个过程,...

    jquery1.8.3 + 中文说明文档

    1. `.each()`:遍历jQuery对象中的每个元素,可以用于批量操作。 2. `.ajax()`:提供了一站式的异步HTTP请求解决方案,支持GET、POST等多种请求类型,可以处理JSON、XML等多种数据格式。 3. `.load()`:方便地加载...

    JQuery的API说明文档

    **jQuery API 说明文档** jQuery 是一个广泛使用的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画和Ajax交互。...通过阅读CHM文档和直接在项目中使用jquery.js文件,开发者可以快速上手并熟练运用jQuery。

    jQuery each函数源码分析_.docx

    jQuery库中的`each`函数是其核心功能之一,它提供了遍历数组和对象的能力,使得开发者能够方便地对集合中的每个元素进行操作。在这个文档中,我们将深入探讨`each`函数的源码,了解其工作原理和用法。 ### 函数简介...

    JQUERY中文API说明

    **jQuery中文API说明** jQuery是一款广泛应用...在实际项目中,结合jQuery与其他前端框架(如Bootstrap或Vue.js)的使用,能进一步提升开发效率和代码质量。记住,不断学习和探索是成为一名优秀Web开发者的不二法门。

    关于jQuery中的each方法(jQuery到底干了什么)

    由于jQuery是JavaScript开发中常用的一个库,each方法的使用非常频繁,尤其在处理DOM元素集合时,它能够简化很多繁琐的循环操作。 在each方法的源码中,我们可以看到它首先会检查传入的参数,根据传入对象的类型...

    jQuery_doc_1.2 完整说明文档, jquery 学习必备

    《jQuery_doc_1.2 完整说明文档》是一份针对jQuery 1.2版本的详尽学习资源...结合实际项目实践,通过阅读和使用《jQuery_doc_1.2 完整说明文档》,你可以逐步提升JavaScript和jQuery的技能,成为一名熟练的前端开发者。

    jquery的each()函数用法[文].pdf

    jQuery的`each()`函数是JavaScript开发中非常常用的一个工具,尤其在处理DOM操作、数组遍历和JSON数据解析时,它的简洁性和灵活性使得代码更加易读且减少错误。以下是关于`each()`函数的详细说明: 1. **遍历一维...

    jQuery圆形转动切换文字说明动画特效

    这段代码可能会使用`.each()`方法遍历所有文本元素,并使用`.delay()`和`.fadeIn()`/`.fadeOut()`方法来控制每个元素的显示和隐藏时间,实现轮流显示的效果。`rotate()`函数可以用来处理元素的旋转动画,结合`...

    jquery离线说明书

    这个离线说明书提供了全面的jQuery API参考,包含了丰富的示例和中英文对照,非常适合开发者在没有网络的情况下学习和查阅。 **一、jQuery核心概念** 1. **选择器(Selectors)**:jQuery的核心在于其强大的选择器...

    jquery常用的一些属性,方法及例子说明

    本文将介绍一些常用的jQuery属性和方法,并通过实例说明其用法。 首先,让我们来了解jQuery的概念。jQuery是由美国人John Resig开发的,随后吸引了大量JavaScript开发者的加入。作为JavaScript的一个封装库,jQuery...

    jquery api中文说明文档

    《jQuery API中文说明文档》是JavaScript开发者不可或缺的参考资料,它详尽地解释了jQuery库的各种功能和用法,使得在Web开发中实现高效、简洁的DOM操作和事件处理变得轻而易举。jQuery是一个广泛使用的JavaScript库...

Global site tag (gtag.js) - Google Analytics