jquery之each遍历

阅读目录

• jQuery 的 each 和 原生的 JavaScript 方法 forEach
• $().each方法，遍历DOM对象
• $.each()方法一般用来遍历数组、对象

回到顶部

jQuery 的 each 和 原生的 JavaScript 方法 forEach

• 原生的 JavaScript 方法 forEach是EcmaScript 5 提供的
  • 不兼容 IE 8
• jQuery 的 each 由 jQuery 这个第三方库提供
  • jQuery 2 以下的版本是兼容 IE 8 的
  • 它的 each 方法主要用来遍历 jQuery 实例对象（伪数组）
  • 同时它也可以作为低版本浏览器中 forEach 替代品
  • jQuery 的实例对象不能使用 forEach 方法，如果想要使用必须转为数组才可以使用
  • [].slice.call(jQuery实例对象)

回到顶部

$().each方法，遍历DOM对象

$('.common_video_modelu .perItem').each(function (index, perItem) {
    // 每一个dom对象
    var $dom_perItem = $(perItem);
})


var obj = [{
		name: 'Jack',
		age: 20
	},
	{
		name: 'Mary',
		age: 40
	},
	{
		name: 'Sunnay',
		age: 26
	}
]
$.each(obj, function(index, perObj) {
	console.log(index)
})

回到顶部

$.each()方法一般用来遍历数组、对象

// 1.  遍历数组
var arr1 = ['Jack', 'Mary', 'Sunnay'];
$.each(arr1, function (index, perItem) {
 // index==数组下标，从0开始
 console.log(index, perItem)
 
 // 返回结果： 0 Jack ; 1 Mary ; 2 Sunnay
})


// 2.  遍历对象
var arrObj = {
    name: 'Jack',
    age: 19,
    gender: '男'
};
$.each(arrObj, function (key, value) {
    // 返回对应的key value 值
    console.log(key, value)
    // 返回结果： name Jack ; age 19 ; gender 男
})