JQuery提供了一个对象遍历的Utility方法$.each()和一个JQuery集合遍历方法.each()。
  • $.each()
    $.each()是一个通用的方法用来遍历对象和数组,Plain对象是通过其命名属性进行遍历的。
    $.each()可以用来替换传统的for和for-in循环。
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()
    .each()是直接使用在JQuery集合上的,它遍历集合中匹配的元素并执行回调函数,当前元素的序号作为回调函数的第一个参数,如果是DOM元素的话也将被传递作为第二个参数。在回调函数中也可以使用this关键字指向当前元素。
<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
    • 第二参数
    无论是故意的还是不经意的,执行上下文有可能会发生改变。当经常使用this关键字时,很容易混淆自己或别人编写的代码。即使执行上下文保持不变,它也更具有可读性。
$( "li" ).each( function( index, listItem ) {
this === listItem; // true
$.ajax({
success: function( data ) {
// 上下文发生改变了
this !== listItem; // true
}
});
});
    • 有时候.each()不是必要的
    许多JQuery方法都隐含遍历,他们将应用在每个匹配的元素上。例如:
$( "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() + "%" );
});
    以下的方法是需要 .each()进行迭代的:
  • .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)
    需要注意的是大部分情况下,getter返回的结果是JQuery集合中的第一个元素,而setter的行为影响集合中所有匹配的元素。
    此外,一个setter的值、特性、属性、CSS的setter和一个接受匿名回调函数的DOM插入方法(.text() and .html())是被应用到每一个匹配的元素,传递给回调函数的参数是当前匹配元素的序号。
$( "input" ).each( function( i, el ) {
var elem = $( el );
elem.val( elem.val() + "%" );
});
$( "input" ).val(function( index, value ) {
return value + "%";
});
  • .map()
    无论什么时候,当我们想创建一个数组或基于所匹配的元素串联字符串,我们可以使用.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()
    $.map()运行在原生JavaScript数组上,而.map()运行在JQuery元素集合上。$.map()返回的是一个原生JavaScript数组并且不需要使用.get()方法。
<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对象的更多相关文章

  1. JQuery官方学习资料(译):JQuery对象

        每当创建一个新的元素(或者选择一个已经存在的元素)时,JQuery将返回一个元素的集合.大部分的开发人员新接触JQuery的时候,都把这个集合当做数组.这个集合中的DOM元素有从零开始的索引, ...

  2. JQuery官方学习资料(译):避免与其他库的冲突

    避免与其他库的冲突     JQuery库和它所有的插件都是包含在jQuery命名空间下的,作为一般规则,全局对象被存储在jQuery的命名空间内,所以你不会得到jQuery和任何其他库之间的冲突(例 ...

  3. JQuery官方学习资料(译):遍历

        一旦你通过JQuery创建了选择器,你就可以对此进行更为深入的遍历.遍历可以分为三个基本组成部分,父节点.子节点和兄弟节点.JQuery为这些部分提供了许多丰富易用的方法. <div c ...

  4. JQuery官方学习资料(译):Utility方法

        JQuery提供了一些utility方法在$命名空间里,这些方法对完成常规的编程任务非常有帮助. $.trim()     删除前后部的空白内容. // 返回 "lots of ex ...

  5. JQuery官方学习资料(译):类型

    类型     JavaScript提供了多个内置数据类型.除了这些,这份文档还将介绍一些虚拟类型,例如选择器.伪类.事件等. String 在JavaScript中字符串是一个不可变的对象,它包含无. ...

  6. JQuery官方学习资料(译):使用JQuery的.index()方法

        .index()是一个JQuery对象方法,一般用于搜索JQuery对象上一个给定的元素.该方法有四种不同的函数签名,接下来将讲解这四种函数签名的具体用法. 无参数的.index() < ...

  7. JQuery官方学习资料(译):Data方法

        你可能经常会想需要通过元素来存储一些数据.在JavaScript中你可能需要给元素添加属性来实现这样的功能,但是在某些浏览器中,你可能还需要处理因此造成的内存泄露问题.JQuery提供了一个简 ...

  8. JQuery官方学习资料(译):CSS

        JQuery提供了一个处理方法,可以获取或设置元素的CSS属性. // 获取 CSS 属性 $( "h1" ).css( "fontSize" ); / ...

  9. JQuery官方学习资料(译):操作元素

      获取和设置元素的信息     有很多种方式可以改变现有的元素,最常见的是改变HTML内容或者元素的属性.JQuery提供了简单的夸浏览器的方法来帮助你实现元素信息的获取和设置. .html():获 ...

随机推荐

  1. 批量引用iconfont字体图标到项目

    打开https://www.iconfont.cn/网址登录后选择你需要的图标添加到购物车中 点击下载代码或者添加到项目后再下载代码,再找到之前下载的的文件,拷贝到项目中

  2. [LeetCode] Loud and Rich 聒噪与富有

    In a group of N people (labelled 0, 1, 2, ..., N-1), each person has different amounts of money, and ...

  3. SQL Server数据库可能遇到的报错

    1.操作附加操作时报错: 可能的解决方法: 退出数据库,换Windows身份验证登录,就可以了 2.插入语句报错: 1) 2)

  4. IDEA环境下SSM整合------注解开发

    根据前一篇文章的步骤,目前项目进度应该是:核心过滤器配置完成.DispatcherServlet和ContextLoader配置完成.数据库dataSource配置完成.视图解析器配置完成.Mappe ...

  5. angular5与angular6的比较

  6. JDK 1.8判断集合种的元素是否存在相同

    List<String> str=new ArrayList<>(); str.add("a"); str.add("a"); str. ...

  7. Spring Boot 实现 RabbitMQ 延迟消费和延迟重试队列

    本文主要摘录自:详细介绍Spring Boot + RabbitMQ实现延迟队列 并增加了自己的一些理解,记录下来,以便日后查阅. 项目源码: spring-boot-rabbitmq-delay-q ...

  8. 对某菠菜网站的一次渗透测试 heatlevel

    前言 无意间发现一个thinkphp的菠菜站,最近tp不是刚好有个漏洞吗?然后就顺手测试了一下,但过程并不太顺利,不过最后还是拿下了,所以特发此文分享下思路. 0x00 一键getshell? 简单看 ...

  9. 剑指Offer全解

    二维数组中的查找 描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中 ...

  10. [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 ...