//函数原型
jQuery.each( collection, callback(indexInArray, valueOfElement) )
//collection The object or array to iterate over.
//collection 需要迭代输出的对象
//callback(indexInArray, valueOfElement) The function that will be executed on every object.
//callback(indexInArray, valueOfElement) 回调函数，这个函数会对每一个对象执行
//-- indexInArray 对象索引号/对象属性号
//-- valueOfElement 对象的值
//Summary
A generic iterator function, which can be used to seamlessly iterate over both objects and arrays. Arrays and array-like objects with a length property (such as a function's arguments object) are iterated by numeric index, from 0 to length-1. Other objects are iterated via their named properties.
/*
这是一个通用的迭代函数，它可以无缝的迭代输出对象和数组，数组和有一个长度属性数组对象(就像函数中的 参数对象 )可以用它们相应的索引值，从0到length-1 迭代输出,其他的对象(如map对象)可以通过他们的名称属性进行迭代。
*/
//官方秘籍第一句就说了
The $.each() function is not the same as $(selector).each()....
//此 $.each() 非 $(selector).each(), 两者压根不是一回事儿。
//$(selector).each() 参考这里 http://api.jquery.com/each/
//数组
$.each([52, 97], function(index, value) {
alert(index + ': ' + value);
});
//output result:
//0: 52
//1: 97
//Map
var map = {
'flammable': 'inflammable',
'duh': 'no duh'
};
$.each(map, function(key, value) {
alert(key + ': ' + value);
});
//output result:
//flammable: inflammable
//duh: no duh
We can break the $.each() loop at a particular iteration by making the callback function return false. Returning non-false is the same as a continue statement in a for loop; it will skip immediately to the next iteration.
/*
我们可以跳出$.each()的循环， return false 结束循环，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).text("Mine is " + this + ".");
return (this != "three"); // will stop running after "three"
});
jQuery.each(obj, function(i, val) {
$("#" + i).append(document.createTextNode(" - " + val));
});
</script>
</body>
</html>
结果
Mine is one. - 1
Mine is two. - 2
Mine is three. - 3
- 4
- 5
//另外两个
Example: Iterates over items in an array, accessing both the current item and its index.
$.each( ['a','b','c'], function(i, l){
alert( "Index #" + i + ": " + l );
});
Example: Iterates over the properties in an object, accessing both the current item and its key.
$.each( { name: "John", lang: "JS" }, function(k, v){
alert( "Key: " + k + ", Value: " + v );
});
分享到：
相关推荐
本篇笔记将深入探讨 jQuery 的核心概念，包括选择器、常用方法以及在实际项目中的应用。 ### 1. 选择器 选择器是 jQuery 的精髓，它们允许我们高效地选取页面上的 HTML 元素。jQuery 支持多种 CSS 选择器，如 ID ...
1. **封装功能**：首先，我们需要把具体的功能封装到一个函数中。例如，我们可以创建一个`share`函数，接受一些参数，如分享的平台和链接等。 ```javascript function share(options) { // 处理选项和参数 var ...
jQuery基础笔记-1 jQuery概述 ----------- jQuery是一个JavaScript库，提供了简洁、快速、轻量级的解决方案，用于简化网页开发。它的主要特点是链式调用、隐式迭代、选择器等，可以帮助开发者快速构建动态网页。 ...
- jQuery提供`each()`方法遍历集合并执行函数，如例子所示，可以方便地对集合中的每个元素进行操作，实现批量处理。 - 这些示例展示了如何通过`each()`实现动态改变元素颜色或实现表格的隔行换色效果。 7. **其他...
jQuery入门笔记涵盖了JavaScript库jQuery的基本知识点，包括其核心概念、语法、选择器、事件处理以及页面元素操作等内容。在深入之前，我们先明确jQuery是一个高效的JavaScript库，它通过简化DOM操作、事件处理、...
jQuery还提供了一些工具函数，如`.each()`, `.extend()`, `.trim()`等，它们在日常开发中非常实用。`.each()`用于迭代数组或对象，`.extend()`可以合并对象，`.trim()`则用于去除字符串两端的空白字符。 结合博文...
相反，如果需要将jQuery对象转回为DOM元素，可以直接访问`this`关键字，如在`.each()`函数中。 ### 选择器 jQuery的选择器强大而灵活，支持各种复杂的元素选取方式。基本的选择器如`#myDiv`可选取具有特定ID的元素...
### JQuery 1.3 笔记知识点总结 #### 属性操作 (Attribute) 1. **添加样式** - `$("p").addClass("css类名")`: 给指定的`<p>`元素添加一个CSS类名定义的样式。 2. **添加属性/值** - `$("img").attr({"属性...
1. each(callback)方法，它以每一个匹配的元素作为上下文来执行一个函数。 2. size()或length属性，用于获取jQuery对象中元素的个数。 3. get(index)，可以取得其中一个匹配的DOM元素。 另外，处理DOM元素和jQuery...
- `$.each()`: 遍历集合中的每个元素，并执行相应的函数。 #### 四、jQuery DOM编程 1. **修改元素属性** - `$.attr()`: 获取或设置属性值。 - `$.removeAttr()`: 移除属性。 - `$.prop()`: 获取或设置属性值...
《jQuery学习笔记详解》 jQuery，作为JavaScript的一个强大库，其核心价值在于提供了一系列便捷的API，使得开发者能更高效地操作DOM（Document Object Model），处理事件、动画以及实现Ajax交互。本文将深入探讨...
### jQuery-1.3.2 学习笔记 #### 一、概述 jQuery 是一个快速、简洁的 JavaScript 库，使用户能更方便地处理 HTML 文档、选择 DOM 元素、制作动画效果，并为应用程序添加 AJAX 交互。版本 1.3.2 在 2009 年 2 月...
2. **回调函数**: jQuery中的许多方法都支持回调函数，如动画完成后的回调，允许在特定事件发生时执行代码。 3. **遍历与过滤**: `$.each()`用于遍历数组或对象，`$(selector).first()`, `$(selector).last()`, `$...
9. **遍历节点**：`.each()`方法允许遍历jQuery对象中的每个元素并执行操作。 10. **CSS-DOM操作**：jQuery提供了简便的方法来操作CSS样式，如`.addClass()`, `.removeClass()`, `.toggleClass()`, `.css()`等。 #...
- 在`ready()`方法中传递一个参数（对jQuery的引用），这样可以在该方法内继续使用`$`。 - 使用匿名函数包裹代码块，其中`$`指向`jQuery`。 - 如果jQuery在其他库之前导入，则可以直接使用`jQuery`代替`$`。 ###...
### jQuery 散人笔记 #### 一、简介与基础概念 **jQuery** 是一个快速、简洁的 JavaScript 库。它极大地简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互等操作。jQuery 提供了一个更为简便的方式来使用常见的...
在jQuery中，`.each()`函数是一个非常重要的方法，它用于遍历数组或对象，执行针对每个元素的操作。在这个实例中，我们看到`.each()`被用来处理`<li>`元素，以实现一个选项卡功能。接下来，我们将深入探讨`.each()`...
2. **遍历和过滤**: jQuery提供了`.each()`方法遍历集合，`.first()`, `.last()`, `.eq(index)`等用于过滤元素，`.not(selector)`则可以移除不匹配的选择。 3. **DOM操作**: 包括元素的增删改查，如`.append()`, `....