JQuery中$.each 和$(selector).each()的区别详解

关于JQuery中.each()方法的区别，其实涉及到两种不同的调用方式：$.each()和$(selector).each()。

$.each()

$.each()是JQuery提供的静态方法，其作用是遍历一个对象或者数组。

使用方式如下：

$.each(obj, function(key, value){
    // 处理逻辑
});

其中，obj是要遍历的对象，function则是每次进行处理的回调函数。这个回调函数中，key用于表示对象的键，value表示对象的值。

例如：

// 遍历一个数组
var arr = ['one', 'two', 'three'];
$.each(arr, function(index, value){
    console.log(index + ': ' + value);
});

// 遍历一个对象
var obj = {
    name: '张三',
    age: 18,
    gender: '男'
};
$.each(obj, function(key, value){
    console.log(key + ': ' + value);
});

上述示例中，第一个$.each()方法将会遍历数组arr，输出其每一个元素的值；第二个$.each()方法将会遍历对象obj，输出其每一个键值对的值。

$(selector).each()

与$.each()不同，$(selector).each()是JQuery提供的实例方法，它的作用是遍历匹配到的元素列表。

使用方式如下：

$(selector).each(function(index, element){
    // 处理逻辑
});

其中，selector是要匹配的元素选择器，function则是每次进行处理的回调函数。回调函数中的index表示元素在列表中的索引，element表示当前处理的元素对象。

例如：

// 遍历所有input元素
$('input').each(function(index, element){
    console.log(index + ': ' + element.value);
});

上述示例中，$('input')将会匹配页面中所有input元素，each()方法将会依次遍历每一个匹配到的元素，并输出其value属性的值。

区别

可以发现，$.each()方法是没有选择器的，因此只能遍历给出的对象或者数组。而$(selector).each()方法是依靠选择器匹配元素，因此只能遍历匹配到的元素列表。

示例

示例：遍历表格中的所有单元格

使用$.each()方法可以遍历一个数组，而使用$(selector).each()方法可以遍历匹配到的元素列表。两者结合起来，可以遍历表格中的所有单元格：

var cells = [];  // 用于存储所有单元格对象
$('table tr').each(function(row_index, row){
    $(row).find('td').each(function(col_index, cell){
        console.log(row_index + '-' + col_index + ': ' + cell.textContent);
        cells.push(cell);
    });
});

console.log(cells.length);  // 输出表格中单元格的数量

说明：

• 首先使用$('table tr').each()方法遍历表格的每一行，row_index表示行的索引，row表示行对象。
• 在行遍历的过程中，使用$(row).find('td').each()方法遍历当前行的所有单元格，col_index表示列的索引，cell表示单元格对象。
• 在每次处理单元格时，将它的内容输出，并将其存储到cells数组中。
• 最后，输出cells.length可以查看表格中单元格的数量。

示例：遍历一个对象

再次展示$.each()方法的使用，这次遍历一个javascript对象，并输出其键和值：

var person = {
    name: '张三',
    age: 18,
    gender: '男'
};

$.each(person, function(key, value){
    console.log(key + ': ' + value);
});

以上代码将输出：

name: 张三
age: 18
gender: 男

说明：

• 首先定义了一个person对象，它有三个属性：name，age和gender。
• 然后，使用$.each()方法遍历person对象，输出其每一个键值对的键和值。