JQuery官方学习资料(译):遍历JQuery对象和非JQuery对象
- $.each()
var sum = 0; var arr = [ 1, 2, 3, 4, 5 ]; for ( var i = 0, l = arr.length; i < l; i++ ) { sum += arr[ i ]; } console.log( sum ); // 15 $.each( arr, function( index, value ){ sum += value; }); console.log( sum ); // 15 |
需要注意的是我们不需要通过arr[ index ]来访问$.each()迭代的值。
var sum = 0; var obj = { foo: 1, bar: 2 } for (var item in obj) { sum += obj[ item ]; } console.log( sum ); // 3 $.each( obj, function( key, value ) { sum += value; }); console.log( sum ); // 3 |
需要注意的是$.each()可以用来迭代plain对象,、数组和非JQuery集合的类数组对象,JQuery集合需要使用.each()。
// 以下代码是错误的 $.each( $( "p" ), function() {}); |
- .each()
<ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> $( "li" ).each( function( index, element ){ console.log( $( this ).text() ); }); // Link 1 // Link 2 // Link 3 |
- 第二参数
$( "li" ).each( function( index, listItem ) { this === listItem; // true $.ajax({ success: function( data ) { // 上下文发生改变了 this !== listItem; // true } }); }); |
- 有时候.each()不是必要的
$( "li" ).each( function( index, el ) { $( el ).addClass( "newClass" ); }); $( "li" ).addClass( "newClass" ); |
也有一些方法是不能进行遍历的,这时就需要 .each()的帮助了。例如:
// 无法运行的 $( "input" ).val( $( this ).val() + "%" ); // .val() 不能改变执行上下文,所以这里this === window $( "input" ).each( function( i, el ) { var elem = $( el ); elem.val( elem.val() + "%" ); }); |
- .attr() (getter)
- .css() (getter)
- .data() (getter)
- .height() (getter)
- .html() (getter)
- .innerHeight()
- .innerWidth()
- .offset() (getter)
- .outerHeight()
- .outerWidth()
- .position()
- .prop() (getter)
- .scrollLeft() (getter)
- .scrollTop() (getter)
- .val() (getter)
- .width() (getter)
$( "input" ).each( function( i, el ) { var elem = $( el ); elem.val( elem.val() + "%" ); }); $( "input" ).val(function( index, value ) { return value + "%"; }); |
- .map()
var newArr = []; $( "li" ).each( function() { newArr.push( this.id ); }); $( "li" ).map( function(index, element) { return this.id; }).get(); |
需要注意的是,.get()连接在最后面,.map()返回的是一个JQuery包裹集合,即使回调函数返回的是字符串。.get()返回的是一个基本的JavaScript数组。如果想要拼接字符串,可以在数组方法.get()之后连接原生JavaScript方法 .join()。
- $.map()
<li id="a"></li> <li id="b"></li> <li id="c"></li> <script> var arr = [{ id: "a", tagName: "li" }, { id: "b", tagName: "li" }, { id: "c", tagName: "li" }]; // 返回 [ "a", "b", "c" ] $( "li" ).map( function( index, element ) { return element.id; }).get(); // 返回 ["a", "b", "c"] $.map( arr, function( value, index ) { return value.id; }); </script> |
JQuery官方学习资料(译):遍历JQuery对象和非JQuery对象的更多相关文章
- JQuery官方学习资料(译):JQuery对象
每当创建一个新的元素(或者选择一个已经存在的元素)时,JQuery将返回一个元素的集合.大部分的开发人员新接触JQuery的时候,都把这个集合当做数组.这个集合中的DOM元素有从零开始的索引, ...
- JQuery官方学习资料(译):避免与其他库的冲突
避免与其他库的冲突 JQuery库和它所有的插件都是包含在jQuery命名空间下的,作为一般规则,全局对象被存储在jQuery的命名空间内,所以你不会得到jQuery和任何其他库之间的冲突(例 ...
- JQuery官方学习资料(译):遍历
一旦你通过JQuery创建了选择器,你就可以对此进行更为深入的遍历.遍历可以分为三个基本组成部分,父节点.子节点和兄弟节点.JQuery为这些部分提供了许多丰富易用的方法. <div c ...
- JQuery官方学习资料(译):Utility方法
JQuery提供了一些utility方法在$命名空间里,这些方法对完成常规的编程任务非常有帮助. $.trim() 删除前后部的空白内容. // 返回 "lots of ex ...
- JQuery官方学习资料(译):类型
类型 JavaScript提供了多个内置数据类型.除了这些,这份文档还将介绍一些虚拟类型,例如选择器.伪类.事件等. String 在JavaScript中字符串是一个不可变的对象,它包含无. ...
- JQuery官方学习资料(译):使用JQuery的.index()方法
.index()是一个JQuery对象方法,一般用于搜索JQuery对象上一个给定的元素.该方法有四种不同的函数签名,接下来将讲解这四种函数签名的具体用法. 无参数的.index() < ...
- JQuery官方学习资料(译):Data方法
你可能经常会想需要通过元素来存储一些数据.在JavaScript中你可能需要给元素添加属性来实现这样的功能,但是在某些浏览器中,你可能还需要处理因此造成的内存泄露问题.JQuery提供了一个简 ...
- JQuery官方学习资料(译):CSS
JQuery提供了一个处理方法,可以获取或设置元素的CSS属性. // 获取 CSS 属性 $( "h1" ).css( "fontSize" ); / ...
- JQuery官方学习资料(译):操作元素
获取和设置元素的信息 有很多种方式可以改变现有的元素,最常见的是改变HTML内容或者元素的属性.JQuery提供了简单的夸浏览器的方法来帮助你实现元素信息的获取和设置. .html():获 ...
随机推荐
- 批量引用iconfont字体图标到项目
打开https://www.iconfont.cn/网址登录后选择你需要的图标添加到购物车中 点击下载代码或者添加到项目后再下载代码,再找到之前下载的的文件,拷贝到项目中
- [LeetCode] Loud and Rich 聒噪与富有
In a group of N people (labelled 0, 1, 2, ..., N-1), each person has different amounts of money, and ...
- SQL Server数据库可能遇到的报错
1.操作附加操作时报错: 可能的解决方法: 退出数据库,换Windows身份验证登录,就可以了 2.插入语句报错: 1) 2)
- IDEA环境下SSM整合------注解开发
根据前一篇文章的步骤,目前项目进度应该是:核心过滤器配置完成.DispatcherServlet和ContextLoader配置完成.数据库dataSource配置完成.视图解析器配置完成.Mappe ...
- angular5与angular6的比较
- JDK 1.8判断集合种的元素是否存在相同
List<String> str=new ArrayList<>(); str.add("a"); str.add("a"); str. ...
- Spring Boot 实现 RabbitMQ 延迟消费和延迟重试队列
本文主要摘录自:详细介绍Spring Boot + RabbitMQ实现延迟队列 并增加了自己的一些理解,记录下来,以便日后查阅. 项目源码: spring-boot-rabbitmq-delay-q ...
- 对某菠菜网站的一次渗透测试 heatlevel
前言 无意间发现一个thinkphp的菠菜站,最近tp不是刚好有个漏洞吗?然后就顺手测试了一下,但过程并不太顺利,不过最后还是拿下了,所以特发此文分享下思路. 0x00 一键getshell? 简单看 ...
- 剑指Offer全解
二维数组中的查找 描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中 ...
- [Swift]LeetCode363. 矩形区域不超过 K 的最大数值和 | Max Sum of Rectangle No Larger Than K
Given a non-empty 2D matrix matrix and an integer k, find the max sum of a rectangle in the matrix s ...