JQuery官方学习资料（译）：遍历JQuery对象和非JQuery对象

时间：2021-09-11 03:03:31
    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>

相关文章